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
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.
More examples¶
Dropdown with icon
Dropdown content
Dropdown with icon and very long title, lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nunc nec fermentum ultricies, nunc sapien ultricies nunc, nec ultricies sapien sapien nec sapien
Dropdown content
Using option :chevron: down-up
Dropdown content
Dropdowns in other components¶
Dropdowns can be nested inside other components, such as inside parent dropdowns or within grid items.
Here is an admonition with a dropdown
Admonition content
Dropdown inside admonition
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.
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.
- chevron
The open-close direction of the chevron. One of:
right-down,down-up.- animate
Animate the dropdown opening (
fade-inorfade-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.
