Skip to content
Primer Design System

Primer Design System

Dropdown

Use dropdown for a lightweight context menu for housing navigation and actions.

On this page

v0.36.1AlphaNot reviewed for accessibility

Description

Dropdown is a lightweight context menu for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the SelectMenu.

Arguments

NameTypeDefaultDescription
overlay
Symbol

:default

One of :dark, :default, or :none.

with_caret
Boolean

false

Whether or not a caret should be rendered in the button.

system_arguments
Hash

N/A

System arguments

Examples

Slots

button

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

menu

Required context menu for the dropdown.

NameTypeDefaultDescription
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.

scheme
Symbol

N/A

Pass :dark for dark mode theming

header
String

N/A

Optional string to display as the header

system_arguments
Hash

N/A

System arguments

Dropdown::Menu::Item

Items to be rendered in the Dropdown menu.

Dropdown::Menu

This component is part of Dropdown and should not be used as a standalone component.

Arguments

NameTypeDefaultDescription
as
Symbol

:default

When as is :list, wraps the menu in a <ul> with a <li> for each item.

direction
Symbol

:se

One of :e, :ne, :s, :se, :sw, or :w..

header
String

nil

Header to be displayed above the menu.

system_arguments
Hash

N/A

System arguments

Slots

items

NameTypeDefaultDescription
tag
Symbol

N/A

One of :a, :button, or :summary..

divider
Boolean

N/A

Whether the item is a divider without any function.

system_arguments
Hash

N/A

System arguments