DropdownComponent

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

DropdownComponent is a lightweight context menu for holding navigation and actions.

Arguments

Name	Type	Default	Description
`overlay`	`Symbol`	`:default`	One of `:default` and `:none`.
`with_caret`	`Boolean`	`false`	Whether or not a caret should be rendered in the button.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Button`

Required trigger for the dropdown. Has the same arguments as ButtonComponent, but it is locked as a summary tag.

Name	Type	Default	Description
`size`	`Symbol`	N/A	One of `:lg`, `:md`, `:sm`, `:xl`, or `:xs`.
`type`	`Symbol`	N/A	One of `:button`, `:reset`, or `:submit`.
`scheme`	`Symbol`	N/A	One of `:danger`, `:default`, `:info`, `:link`, `:none`, `:success`, or `:warning`.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Classes and attributes

`Menu`

Required context menu for the dropdown.

Name	Type	Default	Description
`as`	`Symbol`	N/A	When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
`direction`	`Symbol`	N/A	One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.
`header`	`String`	N/A	Optional string to display as the header
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Classes and attributes

Examples

Default

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu do |menu| %>
   <% menu.header { "Header" } %>
    <% menu.item { "Item 1" } %>
    <% menu.item { "Item 2" } %>
    <% menu.item { "Item 3" } %>
  <% end %>
<% end %>

With dividers

Dividers can be used to separate a group of items. They don’t have any content.

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

<% c.menu do |menu| %>
  <% menu.header { "Header" } %>
  <%= menu.item { "Item 1" } %>
  <%= menu.item { "Item 2" } %>
  <%= menu.item(divider: true) %>
  <%= menu.item { "Item 3" } %>
  <%= menu.item { "Item 4" } %>
  <%= menu.item(divider: true) %>
  <%= menu.item { "Item 5" } %>
  <%= menu.item { "Item 6" } %>
<% end %>
 <% end %>

With direction

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(direction: :s) do |menu| %>
    <% menu.header { "Header" } %>
    <%= menu.item { "Item 1" } %>
    <%= menu.item { "Item 2" } %>
    <%= menu.item { "Item 3" } %>
    <%= menu.item { "Item 4" } %>
  <% end %>
<% end %>

With caret

<%= render(Ariadne::DropdownComponent.new(with_caret: true)) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu do |menu| %>
    <% menu.header { "Header" } %>
    <%= menu.item { "Item 1" } %>
    <%= menu.item { "Item 2" } %>
    <%= menu.item { "Item 3" } %>
    <%= menu.item { "Item 4" } %>
  <% end %>
<% end %>

Customizing the button

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button(scheme: :info, size: :sm) do %>
    Dropdown
  <% end %>

  <% c.menu do |menu| %>
    <% menu.header { "Header" } %>
    <%= menu.item { "Item 1" } %>
    <%= menu.item { "Item 2" } %>
    <%= menu.item { "Item 3" } %>
    <%= menu.item { "Item 4" } %>
 <% end %>
<% end %>

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu(as: :list) do |menu| %>
    <% menu.header { "Header" } %>
    <% menu.item { "Item 1" } %>
    <% menu.item { "Item 2" } %>
    <% menu.item(divider: true) %>
    <% menu.item { "Item 3" } %>
    <% menu.item { "Item 4" } %>
  <% end %>
<% end %>

<%= render(Ariadne::DropdownComponent.new) do |c| %>
  <% c.button do %>
    Dropdown
  <% end %>

  <% c.menu do |menu| %>
    <% menu.header { "Header" } %>
    <% menu.item(tag: :button) { "Item 1" } %>
    <% menu.item(classes: "ariadne-text-red-500") { "Item 2" } %>
    <% menu.item { "Item 3" } %>
  <% end %>
<% end %>

Ariadne