Primer CSS Dropdown

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

Dropdowns are lightweight menus that provide navigation and actions. It is useful in the case when the data need to be organized & displayed with a clickable dropdown menu.

Primer CSS Dropdown Classes: We use the following classes for creating a basic dropdown.

• dropdown: This class is used to add a dropdown component to the website.
• dropdown-caret: This class is used to add a dropdown icon.
• dropdown-item: This class is used to create the dropdown item.
• dropdown-menu: This class is used to create a menu in the dropdown.

Primer CSS Dropdown Options: We use the following classes.

• dropdown-menu-e: This class is used to list items in the east direction.
• dropdown-menu-s: This class is used to list items in the south direction.
• dropdown-menu-w: This class is used to list items in the west direction.
• dropdown-menu-ne: This class is used to list items in the northeast direction.
• dropdown-menu-sw: This class is used to list items in the southwest direction.
• dropdown-menu-se: This class is used to list items in the southeast direction.

Primer CSS Dropdown Divider: We use the following class.

• dropdown-divider: This class is used to add a divider in the dropdown menu list.

Primer CSS Dropdown Header: We use the following class.

• dropdown-header: This class is used to add a header in the dropdown menu list.

Syntax:

<div>
 <details class="dropdown details-reset 
 details-overlay d-inline-block">
 <summary class="btn" aria-haspopup="true">
 Dropdown
 <div class="dropdown-caret"></div>
 </summary>

 <ul class="dropdown-menu dropdown-menu-se">
 <li> ... </li>
 ...
 </ul>
 </details>
</div>

Example 1: This example demonstrates the basic dropdown in Primer CSS.

Output:

Example 2: The below example demonstrates the implementation of all the dropdown options in Primer CSS.

Output: