Primer CSS Dropdown Options

Last Updated : 20 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers dropdowns that can be used as a lightweight context menu for enclosing operations and navigations. In this article, we will discuss different dropdown options available such as alignment, headers, and dividers along with examples.

Primer CSS Dropdown Options classes used:

dropdown-caret: This class is used to create a dropdown arrow icon.
dropdown-menu-ne: This class is used to define menu list items in the northeast direction.
dropdown-menu-e: This class is used to define menu list items in the east direction.
dropdown-menu-se: This class is used to define menu list items in the southeast direction.
dropdown-menu-s: This class is used to define menu list items in the south direction.
dropdown-menu-sw: This class is used to define menu list items in the southwest direction.
dropdown-menu-w: This class is used to define menu list items in the west direction.
dropdown-divider: This class is used to define divider in the dropdown menu list items.
dropdown-header: This class is used to create a header in the dropdown menu list items.

Syntax:

<details class="dropdown details-reset 
    details-overlay d-inline-block">
    <summary class="btn">
         ...
         <div class="dropdown-caret"></div>
       </summary>

       <ul class="dropdown-menu dropdown-menu-ne">
         <li>
             <a class="dropdown-item" href="#">...</a>
         </li>
         ...
       </ul>
</details>

Example 1: Below example illustrates the use of Dropdown Options alignment in Primer CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Dropdown Options </title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
    rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
      <h1 class="color-fg-success"> GeeksforGeeks </h1> 
      <h3> Primer CSS Dropdown Options </h3> 
  
      <div style="margin-top: 96px"> 
        <details class="dropdown details-reset  
           details-overlay d-inline-block mb-5"> 
          <summary class="btn"> 
            Select any Course 
            <div class="dropdown-caret"></div> 
          </summary> 
  
          <ul class="dropdown-menu dropdown-menu-ne"> 
            <li><a class="dropdown-item" href="#">DSA</a></li> 
            <li><a class="dropdown-item" href="#">OOP's</a></li> 
            <li><a class="dropdown-item" href="#">DBMS</a></li> 
          </ul> 
        </details> 
      </div> 
  
      <details class="dropdown details-reset  
         details-overlay d-inline-block mt-2"> 
        <summary class="btn"> 
          Select Test Series 
          <div class="dropdown-caret"></div> 
        </summary> 
  
        <ul class="dropdown-menu dropdown-menu-e"> 
          <li><a class="dropdown-item" href="#"> 
              Amazon Test Series 
          </a></li> 
          <li><a class="dropdown-item" href="#"> 
              Microsoft Test Series 
          </a></li> 
          <li><a class="dropdown-item" href="#"> 
              Google Test Series 
          </a></li> 
        </ul> 
      </details> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Dropdown Options

Example 2: Below example illustrates the use of Dropdown Dividers in Primer CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Dropdown Options </title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success">  
            GeeksforGeeks 
        </h1> 
          
        <h3> Primer CSS Dropdown Options </h3> 
  
        <details class="dropdown details-reset  
            details-overlay d-inline-block mt-3"> 
            <summary class="btn" aria-haspopup="true"> 
                Select any Course 
                <div class="dropdown-caret"></div> 
            </summary> 
  
            <ul class="dropdown-menu dropdown-menu-se"> 
                <li><a class="dropdown-item" href="#">DSA</a></li> 
                <li><a class="dropdown-item" href="#">OOP's</a></li> 
                <li><a class="dropdown-item" href="#">DBMS</a></li> 
                <li class="dropdown-divider" role="separator"></li> 
                <li><a class="dropdown-item" href="#"> 
                        Operating System 
                    </a> 
                </li> 
            </ul> 
        </details> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Dropdown Options

Example 3: Below example illustrates the use of Dropdown Headers in Primer CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Dropdown Options </title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h3> Primer CSS Dropdown Options </h3> 
  
        <details class="dropdown details-reset  
            details-overlay d-inline-block mt-3"> 
            <summary class="btn" aria-haspopup="true"> 
                Select any course 
                <div class="dropdown-caret"></div> 
            </summary> 
  
            <div class="dropdown-menu dropdown-menu-se"> 
                <div class="dropdown-header"> 
                    GeeksforGeeks courses 
                </div> 
  
                <ul> 
                    <li><a class="dropdown-item" href="#">DSA</a></li> 
                    <li><a class="dropdown-item" href="#">OOP's</a></li> 
                    <li><a class="dropdown-item" href="#">DBMS</a></li> 
                </ul> 
            </div> 
        </details> 
    </center> 
</body> 
  
</html>