Primer CSS Tabs

Last Updated : 07 Mar, 2024

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Tabs are used to separate two or more lists and make them visible if the respective tab is selected. Tabs can be placed in the SelectMenu from where the items can be selected.

Primer CSS Tabs Classes:

SelectMenu-tabs: This class is used to create tabs and placed them in the nav element.

Syntax: Create tabs in the selection menu as follows.

<nav class="SelectMenu-tabs">
  <button class="SelectMenu-tab" 
      aria-selected="true">...</button>
  <button class="SelectMenu-tab">...</button>
</nav>

Example 1: In the following example, we have tabs with items in the menu and we can toggle between them to view the different items.

HTML

<!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 rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding:1em;"> 
        <center> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Primer CSS Tabs</strong> 
            <br /><br /> 
        </center> 
  
        <div class="SelectMenu"> 
            <div class="SelectMenu-modal"> 
                <header class="SelectMenu-header"> 
                    <h3 class="SelectMenu-title"> 
                        GeeksforGeeks 
                    </h3> 
                </header> 
  
                <nav class="SelectMenu-tabs"> 
                    <button id="ds" onclick="changeTab('ds')" 
                        class="SelectMenu-tab" 
                        aria-selected="true"> 
                        Data Structures 
                    </button> 
  
                    <button id="algo" onclick="changeTab('algo')" 
                        class="SelectMenu-tab" aria-selected=""> 
                        Algorithms 
                    </button> 
                </nav> 
  
                <div id="dslist" class="SelectMenu-list"> 
                    <button class="SelectMenu-item" 
                        role="menuitem">Stack</button> 
                    <button class="SelectMenu-item" 
                        role="menuitem">Queue</button> 
                    <button class="SelectMenu-item" 
                        role="menuitem">Array</button> 
                </div> 
  
                <div id="algolist" class="SelectMenu-list" 
                    hidden="true"> 
                    <button class="SelectMenu-item" role="menuitem"> 
                        Selection Sort 
                    </button> 
                    <button class="SelectMenu-item" role="menuitem"> 
                        Greedy Algorithm 
                    </button> 
                    <button class="SelectMenu-item" role="menuitem"> 
                        Dijkstra's Algorithm 
                    </button> 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        const changeTab = (elem) => { 
            $('.SelectMenu-tab').attr('aria-selected', 'false') 
            $(`#${elem}`).attr('aria-selected', 'true') 
            $('.SelectMenu-list').removeAttr('hidden') 
            if (elem === 'ds') $(`#algolist`).attr('hidden', 'true') 
            else $(`#dslist`).attr('hidden', 'true') 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: In the following example, the select menu appears in form of a popup when the open button is clicked on the webpage.

HTML

<!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 rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding:1em;"> 
        <center> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Primer CSS Tabs</strong> 
            <br /><br /> 
        </center> 
  
        <details class="details-reset details-overlay" open> 
            <summary class="btn" aria-haspopup="true"> 
                Choose tutorials 
            </summary> 
            <div class="SelectMenu"> 
                <div class="SelectMenu-modal"> 
                    <header class="SelectMenu-header"> 
                        <h3 class="SelectMenu-title"> 
                            GeeksforGeeks 
                        </h3> 
                    </header> 
  
                    <nav class="SelectMenu-tabs"> 
                        <button id="ds" onclick="changeTab('ds')" 
                            class="SelectMenu-tab" 
                            aria-selected="true"> 
                            Data Structures 
                        </button> 
  
                        <button id="algo" onclick="changeTab('algo')" 
                            class="SelectMenu-tab" aria-selected=""> 
                            Algorithms 
                        </button> 
                    </nav> 
  
                    <div id="dslist" class="SelectMenu-list"> 
                        <button class="SelectMenu-item" 
                            role="menuitem">Stack</button> 
                        <button class="SelectMenu-item" 
                            role="menuitem">Queue</button> 
                        <button class="SelectMenu-item" 
                            role="menuitem">Array</button> 
                    </div> 
                      
                    <div id="algolist" class="SelectMenu-list" hidden="true"> 
                        <button class="SelectMenu-item" role="menuitem"> 
                            Selection Sort 
                        </button> 
                        <button class="SelectMenu-item" role="menuitem"> 
                            Greedy Algorithm 
                        </button> 
                        <button class="SelectMenu-item" role="menuitem"> 
                            Dijkstra's Algorithm 
                        </button> 
                    </div> 
                </div> 
            </div> 
        </details> 
    </div> 
  
    <script> 
        const changeTab = (elem) => { 
            $('.SelectMenu-tab').attr('aria-selected', 'false') 
            $(`#${elem}`).attr('aria-selected', 'true') 
            $('.SelectMenu-list').removeAttr('hidden') 
            if (elem === 'ds') $(`#algolist`).attr('hidden', 'true') 
            else $(`#dslist`).attr('hidden', 'true') 
        } 
    </script> 
</body> 
  
</html>

Output:

Suggest improvement

Primer CSS Tables

Share your thoughts in the comments

Primer CSS Tabs

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?