Primer CSS Navigation

Primer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired by object-oriented CSS principles, fundamental CSS, and BEM architecture. It is highly reusable and flexible. It is built with GitHub’s design system.

Primer CSS Navigation provides the utility to create a navigation bar or a navigation menu of a webpage which is one of the most important components of a website. It let us create navbars or nav menus of different designs and layouts. It allows us to create more flexible and customizable navigation components. 

Various layouts and the specific classes:

Basic Menu: A basic menu is a vertical list of navigation links.

Basic Menu Classes:

• menu: This class is added to the container which contains the links of the navigation component.
• menu-item: This class is added to the navigation links of the navigation component.
• menu-heading: This class is an optional part of a navigation component that is used to add a heading to the navigation component.

The anchor tag whose aria-current attribute has the value of "page" will be shown as selected.

Syntax:

<nav class="menu">
  <span class="menu-heading">...</span>
  <a class="menu-item" aria-current="..">...</a>
  <a class="menu-item">...</a>
</nav>

Underline Navigation: This is used to style navigation components with a minimal underlined selected state, typically used for navigation placed at the top of the page.

Underline Navigation Classes:

• UnderlineNav: This class is added to the container that has a navigation component body.
• UnderlineNav-body: This encloses all the links of the underline navigation component.
• UnderlineNav-item: This class is used to signify the navigation links of the navigation component.
• UnderlineNav-actions: This class is used to place another element, such as a button, on the opposite side of the navigation items
• UnderlineNav--right: This class aligns the navigation to right.
• UnderlineNav--full: It is used with the UnderlineNav-container class to make the navigation fill the whole width of the container.

Syntax:

<nav class="UnderlineNav UnderlineNav--full">
  <div class="container-lg UnderlineNav-container">
        <div class="UnderlineNav-body">
              <a class="UnderlineNav-item" aria-current="..">...</a>
              <a class="UnderlineNav-item">...</a>
        </div>
        <div class="UnderlineNav-actions">
            ...
        </div>
  </div>
</nav>

Side Navigation: It is a vertical list of navigation links generally used at the left of a page.  We can use a column grid class or an inline style for sizing it, and flexbox utilities for positioning it across content.

Side Navigation Classes:

• SideNav: This class is added to the container which contains the links of the side navigation component.
• SideNav-item: This class is added to the navigation links of the side navigation component.
• SideNav-subItem: By using this class we can create a side navigation component that is much more lightweight and condensed in appearance with no borders.

Syntax:

<nav class="SideNav">
      <a class="SideNav-item">...</a>
      <a class="SideNav-item" aria-current="...">...</a>
      <nav class="SideNav">
        <a class="SideNav-subItem" aria-current="...">...</a>
        <a class="SideNav-subItem">...</a>
        <a class="SideNav-subItem">...</a>
      </nav>
</nav>

Tab Navigation: This navigation is needed to create navigation with toggling options, like toggling between views, etc. This provides us with a left-aligned horizontal row of tabs.

• tabnav: This class is given to the container which will have the tab navigation inside it.
• tabnav-tabs: It is given to the nav elements which will hold all the tabs inside it.
• tabnav-tab: Specifies the individual tabs of the navigation component.
• tabnav-extra: This class helps us to add additional texts and links inside the tab nav.

Syntax:

<div class="tabnav">
      <div class="float-right">
        <a class="tabnav-extra">...</a>
        <a class="tabnav-extra">...</a>
      </div>
      <nav class="tabnav-tabs">
        <a class="tabnav-tab" aria-current="...">...</a>
        <a class="tabnav-tab">...</a>
      </nav>
</div>

Sub Navigation: This navigation is typically used when we have a dashboard-type interface with another set of navigation above it. It helps us to distinguish the navigation hierarchy.

• subnav: This class is added to the nav element which holds all the navigation links for the sub-navigation component.
• subnav-item: This class specifies the links in the navigation component.
• subnav-links: When we are having something more than just links in the sub-navigation component, we use this class to specify which ones will be the links for it.
• subnav-search: This creates a search bar for us in the sub-navigation component.

Syntax:

<div class="subnav">
      <nav class="subnav-links">
        <a class="subnav-item" aria-current="...">...</a>
        <a class="subnav-item">...</a>
        <a class="subnav-item">...</a>
      </nav>
      <div class="subnav-search float-left">
        <input type="search" class="form-control subnav-search-input"/>
      </div>
</div>

Example 1: The below given example illustrates an Underline Navigation Bar. The UnderlineNav--full and UnderlineNav-actions classes are used, and the latter is used to add a contribute button.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>

<body>
    <div class="m-4">
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
        
        <h3>Primer CSS Navigation</h3><br />
    </div>

    <nav class="UnderlineNav UnderlineNav--full" 
        aria-label="Foo bar">
        <div class="container-lg UnderlineNav-container">
            <div class="UnderlineNav-body mr-5">
                <a class="UnderlineNav-item" 
                    href="#url" aria-current="page">
                    Data Structures
                </a>

                <a class="UnderlineNav-item" 
                    href="#url">Algorithms
                    <span class="Counter">10</span>
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Topic-wise Practice
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Competitive Programming
                </a>
                <a class="UnderlineNav-item" href="#url">
                    C++
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Java
                </a>
            </div>
            <div class="UnderlineNav-actions">
                <a class="btn btn-sm">Contribute</a>
            </div>
        </div>
    </nav>
</body>

</html>

Output:

Example 2: The below given example illustrates a Side Navigation Bar. We are adding an avatar to the navigation links and the SideNav-subItem to add a sub-menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>

<body>
    <div class="m-4">
        <h1 class="color-fg-success"> 
            GeeksforGeeks
        </h1>
        
        <h3>Primer CSS Navigation</h3><br/>
    </div>

    <nav class="SideNav border ml-4" 
        style="max-width:20rem">
        <a class="SideNav-item" href="#url">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Data Structures</span>
        </a>
        
        <a class="SideNav-item" href="#url" 
            aria-current="page">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Algorithms</span>
        </a>
        
        <nav class="SideNav color-bg-default border-top py-3" 
            style="padding-left:44px">
            <a class="SideNav-subItem" href="#url" 
                aria-current="page">Java</a>
            <a class="SideNav-subItem" href="#url">C++</a>
            <a class="SideNav-subItem" href="#url">Python</a>
        </nav>

        <a class="SideNav-item" href="#url">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Competitive Programming</span>
        </a>
    </nav>
</body>
</html>

Output:

Example 3: The below given example illustrates a Tab Navigation Bar. We are adding an avatar to the navigation links and a Contribute button to the right of the navigation bar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>

<body>
    <div class="m-4">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        
        <h3>Primer CSS Navigation</h3><br />
    </div>

    <div class="tabnav">
        <a class="btn btn-sm float-right mr-4" href="#url" 
            role="button">Contribute</a>
        <nav class="tabnav-tabs" aria-label="Foo bar">
            <a class="tabnav-tab" href="#url" aria-current="page">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Data Structures</span>
                <span class="Counter">2</span>
            </a>

            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Algorithms</span>
                <span class="Counter">3</span>
            </a>

            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Competitive Programming</span>
                <span class="Counter">27</span>
            </a>
            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Topic Wise Practice</span>
                <span class="Counter">6</span>
            </a>
        </nav>
    </div>
</body>

</html>

Output: