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

MARKDOWN

:::{dropdown}
Dropdown content
:::

:::{dropdown} Dropdown title
Dropdown content
:::

:::{dropdown} Open dropdown
:open:

Dropdown content
:::

RST

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

Dropdown fade-in-slide-down

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 or fade-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.