Dropdown¶

Toggleable, contextual overlays for displaying lists of links and more, made interactive with the Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not hovering — an intentional design decision.

Examples¶

Default, split button, and the dark variant.

DefaultSplit ButtonDark

Usage

Fill the title slot with the button's label and pass content as a list of links (or dividers/headers — see Props below):

{% embed 'bootstrap_components:dropdown' with {
  button_variant: 'primary',
  content: [
    { url: '/actions', title: 'Action' },
    { url: '/more', title: 'Another action' },
    { url: '/more', title: 'Something else here' },
    {},
    { url: '/more', title: 'Separated link' },
  ],
} %}
  {% block title %}Dropdown{% endblock %}
{% endembed %}

Usage

button_split: true renders the label as its own button, separate from the caret toggle.

{% embed 'bootstrap_components:dropdown' with {
  button_variant: 'primary',
  button_split: true,
  content: [
    { url: '/actions', title: 'Action' },
    { url: '/more', title: 'Another action' },
    { url: '/more', title: 'Something else here' },
    {},
    { url: '/more', title: 'Separated link' },
  ],
} %}
  {% block title %}Split button{% endblock %}
{% endembed %}

Usage

{% embed 'bootstrap_components:dropdown' with {
  button_variant: 'secondary',
  color_scheme: 'dark',
  content: [
    { url: '/actions', title: 'Action', link_attributes: { class: ['active'] } },
    { url: '/more', title: 'Another action' },
    { url: '/more', title: 'Something else here' },
    {},
    { url: '/more', title: 'Separated link' },
  ],
} %}
  {% block title %}Dropdown button{% endblock %}
{% endembed %}

Props¶

Prop	Type	Description	Example
`variant`	string	Menu direction: `dropdown`, `dropdown_center`, `dropup`, `dropup_center`, `dropend` or `dropstart`. Defaults to `dropdown`.	`dropdown`
`content`	array	Link list. No `url` + `dropdown-header` class → header; no `url` + `dropdown-item` class → button; no `title`/`url` (or `dropdown-divider` class) → divider.	`[{url: '/actions', title: 'Action'}]`
`dropdown_id`	string	Must start with a letter. Randomly generated if empty.
`button_variant`	string	Button color variant. Defaults to `primary`.	`primary`
`button_size`	string	Button size: `default`, `sm` or `lg`.	`default`
`color_scheme`	string	`light` or `dark`. Dark renders the menu in Bootstrap's dark color mode. Defaults to `light`.	`light`
`button_split`	boolean	Split the toggle into a label button + a separate caret button.	`false`
`button_url`	string	Where the main button of a split dropdown links. On a single button the toggle becomes an `<a>`, but Bootstrap doesn't follow its URL.	`/actions`
`button_attributes`	Attribute	Extra attributes for the toggle button. Twig only.	—
`auto_close`	string	`true` (default), `inside`, `outside`, or `false`.	`true`
`dropdown_navbar`	boolean	Set when used inside a Navbar Nav item.	`false`
`dropdown_menu_start`	string	Left-align the menu from a given breakpoint (`start`, `sm-start`, …).	`start`
`dropdown_menu_end`	string	Right-align the menu from a given breakpoint (`end`, `sm-end`, …).	`end`

Slots¶

Slot	Description
`title`	The dropdown button's label. Plain text.

Variants¶

Variant	Description
`dropdown`	Standard dropdown (default).
`dropdown_center`	Centered dropdown.
`dropup`	Opens upward.
`dropup_center`	Centered dropup.
`dropend`	Opens to the right.
`dropstart`	Opens to the left.