Dropdown (dropdown)
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
| ID | Label | Description | Schema |
|---|---|---|---|
| title | Title | The dropdown button title. Plain text. | |
| content | Content | If a link does not have a URL, it renders as: a header if it has the 'dropdown-header' class; a button if it has the 'dropdown-item' class; else a text. If a link does not have a url and a title or has the 'dropdown-divider' class, it renders as a divider. |
|
| dropdown_id | ID | Must start with a letter. Randomly generated if empty. |
|
| button_variant | Button variant |
|
|
| button_split | Split | Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret. |
|
| button_url | Button URL |
|
|
| button_attributes | Button attributes | The attributes to customize the dropdown button. |
|
| dark | Dark (deprecated) | Opt into darker dropdowns to match a dark navbar or custom style. |
|
| auto_close | Auto close | By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown. |
|
| dropdown_navbar | Use in navbar? | Check if the dropdown will be used in a navbar-nav element. |
|
| heading_level | Heading level for header items |
|
id: dropdown
label: Dropdown
description: 'Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.'
group: Dropdown
homepage: 'https://getbootstrap.com/docs/5.3/components/dropdowns/'
variants:
dropdown:
id: dropdown
label: 'Dropdown (Default)'
dropdown_center:
id: dropdown_center
label: 'Centered dropdown'
dropup:
id: dropup
label: Dropup
dropup_center:
id: dropup_center
label: 'Centered dropup'
dropend:
id: dropend
label: Dropend
dropstart:
id: dropstart
label: Dropstart
slots:
title:
id: title
label: Title
description: 'The dropdown button title. Plain text.'
props:
content:
id: content
label: Content
description: "If a link does not have a URL, it renders as: a header if it has the 'dropdown-header' class; a button if it has the 'dropdown-item' class; else a text. If a link does not have a url and a title or has the 'dropdown-divider' class, it renders as a divider."
schema:
type: array
items:
type: object
properties:
title:
type: string
attributes:
$ref: '#/$defs/attributes_value'
below:
type: object
dropdown_id:
id: dropdown_id
label: ID
description: 'Must start with a letter. Randomly generated if empty.'
schema:
type: string
button_variant:
id: button_variant
label: 'Button variant'
schema:
type: string
enum:
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- link
- primary__sm
- secondary__sm
- success__sm
- danger__sm
- warning__sm
- info__sm
- light__sm
- dark__sm
- link__sm
- primary__lg
- secondary__lg
- success__lg
- danger__lg
- warning__lg
- info__lg
- light__lg
- dark__lg
- link__lg
- outline_primary__sm
- outline_secondary__sm
- outline_success__sm
- outline_danger__sm
- outline_warning__sm
- outline_info__sm
- outline_light__sm
- outline_dark__sm
- outline_primary
- outline_secondary
- outline_success
- outline_danger
- outline_warning
- outline_info
- outline_light
- outline_dark
- outline_primary__lg
- outline_secondary__lg
- outline_success__lg
- outline_danger__lg
- outline_warning__lg
- outline_info__lg
- outline_light__lg
- outline_dark__lg
button_split:
id: button_split
label: Split
description: 'Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.'
schema:
type: boolean
button_url:
id: button_url
label: 'Button URL'
schema:
type: string
format: uri-reference
button_attributes:
id: button_attributes
label: 'Button attributes'
description: 'The attributes to customize the dropdown button.'
schema:
type: object
patternProperties:
.+:
anyOf:
-
type:
- string
- number
-
type: array
items:
type:
- string
- number
dark:
id: dark
label: 'Dark (deprecated)'
description: 'Opt into darker dropdowns to match a dark navbar or custom style.'
schema:
type: boolean
auto_close:
id: auto_close
label: 'Auto close'
description: 'By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.'
schema:
type: string
enum:
- 'true'
- inside
- outside
- 'false'
dropdown_navbar:
id: dropdown_navbar
label: 'Use in navbar?'
description: 'Check if the dropdown will be used in a navbar-nav element.'
schema:
type: boolean
heading_level:
id: heading_level
label: 'Heading level for header items'
schema:
type: integer
enum:
- 2
- 3
- 4
- 5
- 6
examples:
preview:
id: preview
label: Preview
renderable:
'@component': dropdown
title: Button
content:
0:
title: 'Dropdown header'
link_attributes:
class:
- dropdown-header
1:
title: Action
url: '#'
2:
title: 'Dropdown item text'
3:
title: 'Another action'
url: '#'
4:
title: 'Something else here'
url: '#'
6:
title: 'Separated link'
url: '#'
7:
title: 'Action (button)'
link_attributes:
class:
- dropdown-item
8:
title: 'Another action (button)'
link_attributes:
class:
- dropdown-item
9:
title: 'Something else here (text)'
button_variant: primary
button_split: true
button_url: /
auto_close: 'true'
heading_level: 6