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.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Primer CSS Dropdown</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
<body>
<div class="m-4">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>
Primer CSS Dropdown
</h2>
</div>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Courses
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-se">
<li>
<a class="dropdown-item" href="#">
Java Fork
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Python advanced
</a>
</li>
<li>
<a class="dropdown-item" href="#">
DSA fork
</a>
</li>
</ul>
</details>
</div>
</body>
</html>
|
Output:
Example 2: The below example demonstrates the implementation of all the dropdown options in Primer CSS.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Primer CSS Dropdown</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
<body>
<div class="m-4 pt-4" style="text-align: center;">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>
Primer CSS Dropdown
</h2>
</div>
<div class="container-lg clearfix">
<div class="col-4 float-left p-4">
<h3> .ne option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Jobs
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-ne">
<li>
<a class="dropdown-item" href="#">
Apply for job
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Post a job
</a>
</li>
<li>
<a class="dropdown-item" href="#">
JOB-A-THON
</a>
</li>
</ul>
</details>
</div>
</div>
<div class="col-4 float-left p-4">
<h3> .e option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Courses
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-e">
<li>
<a class="dropdown-item" href="#">
Java Fork
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Python advanced
</a>
</li>
<li>
<a class="dropdown-item" href="#">
DSA fork
</a>
</li>
</ul>
</details>
</div>
</div>
<div class="col-4 float-left p-4">
<h3> .se option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn"
aria-haspopup="true"> Tutorials
<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="#">
CSS
</a>
</li>
<li>
<a class="dropdown-item" href="#">
HTML
</a>
</li>
</ul>
</details>
</div>
</div>
</div>
<div class="container-lg clearfix">
<div class="col-4 float-left p-4">
<h3> .s option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Jobs
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-s">
<li>
<a class="dropdown-item" href="#">
Apply for job
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Post a job
</a>
</li>
<li>
<a class="dropdown-item" href="#">
JOB-A-THON
</a>
</li>
</ul>
</details>
</div>
</div>
<div class="col-4 float-left p-4">
<h3> .sw option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Courses
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-sw">
<li>
<a class="dropdown-item" href="#">
Java Fork
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Python advanced
</a>
</li>
<li>
<a class="dropdown-item" href="#">
DSA fork
</a>
</li>
</ul>
</details>
</div>
</div>
<div class="col-4 float-left p-4">
<h3> .w option </h3>
<div class="m-4">
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true"> Tutorials
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-w">
<li>
<a class="dropdown-item" href="#">
DSA
</a>
</li>
<li>
<a class="dropdown-item" href="#">
CSS
</a>
</li>
<li>
<a class="dropdown-item" href="#">
HTML
</a>
</li>
</ul>
</details>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/dropdown