Dropdowns#
Dropdowns can be used to toggle, usually non-essential, content and show it only when a user clicks on the header panel.
The dropdown can have a title, as the directive argument, and the open
option can be used to initialise the dropdown in the open state.
Dropdown content
Dropdown title
Dropdown content
Open dropdown
Dropdown content
Syntax
:::{dropdown}
Dropdown content
:::
:::{dropdown} Dropdown title
Dropdown content
:::
:::{dropdown} Open dropdown
:open:
Dropdown content
:::
.. dropdown::
Dropdown content
.. dropdown:: Dropdown title
Dropdown content
.. dropdown:: Open dropdown
:open:
Dropdown content
Dropdown opening animations#
Use :animate: fade-in
or :animate: fade-in-slide-down
options to animate the reveal of the hidden content.
Dropdown fade-in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis arcu vitae odio gravida congue. Donec porttitor ac risus et condimentum. Phasellus bibendum ac risus a sollicitudin. Proin pulvinar risus ac mauris aliquet fermentum et varius nisi. Etiam sit amet metus ac ipsum placerat congue semper non diam. Nunc luctus tincidunt ipsum id eleifend. Ut sed faucibus ipsum. Aliquam maximus dictum posuere. Nunc vitae libero nec enim tempus euismod. Aliquam sed lectus ac nisl sollicitudin ultricies id at neque. Aliquam fringilla odio vitae lorem ornare, sit amet scelerisque orci fringilla. Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. Etiam quis nunc at ligula tincidunt eleifend.
Dropdowns in other components#
Dropdowns can be nested inside other components, such as inside parent dropdowns or within grid items.
Parent dropdown title
Child dropdown title
Dropdown content
Dropdown Column 1
Dropdown content
Dropdown Column 2
Dropdown content
dropdown
options#
- open
Open the dropdown by default.
- color
Set the color of the dropdown header (background and font). One of the semantic color names:
primary
,secondary
,success
,danger
,warning
,info
,light
,dark
,muted
.- icon
Set an octicon icon to prefix the dropdown header.
- animate
Animate the dropdown opening (
fade-in
orfade-in-slide-down
).- margin
Outer margin of grid. One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
- name
Set a reference-able name for the dropdown container.
- class-container
Additional CSS classes for the container element.
- class-title
Additional CSS classes for the title element.
- class-body
Additional CSS classes for the body element.