Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<svg class="octicon octicon-code UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06L11.28 3.22z"></path> </svg> Code </button> <button class="UnderlineNav-item" onclick="showTab(event, 'issues')"> <svg class="octicon octicon-issue-opened UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path> </svg> Issues <span class="Counter">12</span> </button> <button class="UnderlineNav-item" onclick="showTab(event, 'pulls')"> <svg class="octicon octicon-git-pull-request UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path> </svg> Pull requests <span class="Counter">3</span> </button> <button class="UnderlineNav-item" onclick="showTab(event, 'actions')"> <svg class="octicon octicon-play UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg> Actions </button> </div> </nav> <!-- Tab Content --> <div id="code" class="tab-content active"> <h4 class="h4 mb-2">Code</h4> <p>Browse the repository files and folders.</p> </div> <div id="issues" class="tab-content"> <h4 class="h4 mb-2">Issues</h4> <p>Track bugs and feature requests.</p> </div> <div id="pulls" class="tab-content"> <h4 class="h4 mb-2">Pull Requests</h4> <p>Review code changes and collaborate.</p> </div> <div id="actions" class="tab-content"> <h4 class="h4 mb-2">Actions</h4> <p>Automate workflows and CI/CD.</p> </div> </div> </div> <!-- Best Practices --> <div class="demo-section"> <h2 class="h2 mb-3">Best Practices</h2> <ul class="mb-3"> <li class="mb-2">Each tab panel should have discrete content with a unique URL, not just different formats to view the same content.</li> <li class="mb-2">One of the tabs should be selected by default when the user loads the page.</li> <li class="mb-2">Avoid overwhelming the user with too many tabs. Instead consider a navigation structure like a nav list that's meant to handle more links.</li> <li class="mb-2">Each view should have enough information so the user can complete their tasks without switching back and forth between tabs.</li> <li class="mb-2">Views should be able to be navigated in any order. This is not a pattern for navigating stepped flows.</li> </ul> </div> <!-- Anatomy --> <div class="demo-section"> <h2 class="h2 mb-3">Anatomy</h2> <img src="https://user-images.githubusercontent.com/175638/186432408-c2479dd2-31fe-4261-9f9a-e67d49b28e72.png" alt="Anatomy of the UnderlineNav component" class="anatomy-image mb-3"> <ul class="mb-3"> <li class="mb-2"><strong>Item</strong>: Tabs to switch between views when activated.</li> <li class="mb-2"><strong>Current item</strong>: The item currently selected is highlighted with an underline.</li> <li class="mb-2"><strong>Label text</strong>: Describes the navigation item.</li> <li class="mb-2"><strong>Leading icon (optional)</strong>: An icon that identifies the navigation item.</li> <li class="mb-2"><strong>Counter (optional)</strong>: Displays a count next to the label.</li> <li class="mb-2"><strong>Overflow menu</strong>: A disclosure menu that displays additional items when there are too many to fit in the available space.</li> </ul> </div> <!-- Label Text Guidelines --> <div class="demo-section"> <h3 class="h3 mb-3">Label Text</h3> <p class="mb-3">The title of the view associated with that tab. Keep labels clear, short, and concise.</p> <div class="do-dont-container"> <div class="do-dont-item do-item"> <h4 class="h4 mb-2 color-fg-success">✓ Do</h4> <nav class="UnderlineNav mb-2" aria-label="Example"> <div class="UnderlineNav-body"> <button class="UnderlineNav-item" aria-current="page">Code</button> <button class="UnderlineNav-item">Issues</button> <button class="UnderlineNav-item">Pull requests</button> </div> </nav> <p class="f6">Use label text that clearly communicates what the tab represents.</p> </div> <div class="do-dont-item dont-item"> <h4 class="h4 mb-2 color-fg-danger">✗ Don't</h4> <nav class="UnderlineNav mb-2" aria-label="Example"> <div class="UnderlineNav-body"> <button class="UnderlineNav-item" aria-current="page"> <svg class="octicon octicon-code UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06L11.28 3.22z"></path> </svg> </button> <button class="UnderlineNav-item"> <svg class="octicon octicon-issue-opened UnderlineNav-octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path> </svg> </button> </div> </nav> <p class="f6">Don't rely on supplemental content to communicate what the tab represents.</p> </div> </div> </div> <!-- Responsive Example --> <div class="demo-section"> <h2 class="h2 mb-3">Responsive Design</h2> <p class="mb-3">Underline nav handles overflowing items automatically by collapsing them into a disclosure menu.</p> <nav class="UnderlineNav" aria-label="Repository"> <div class="UnderlineNav-body"> <button class="UnderlineNav-item" aria-current="page">Code</button> <button class="UnderlineNav-item">Issues <span class="Counter">12</span></button> <button class="UnderlineNav-item">Pull requests <span class="Counter">3</span></button> <button class="UnderlineNav-item">Actions</button> <button class="UnderlineNav-item">Projects</button> <button class="UnderlineNav-item">Wiki</button> <button class="UnderlineNav-item">Security</button> <button class="UnderlineNav-item">Insights</button> <button class="UnderlineNav-item">Settings</button> </div> </nav> </div> <!-- Accessibility Section --> <div class="demo-section" id="accessibility"> <h2 class="h2 mb-3">Accessibility</h2> <p class="mb-3">Set <code>aria-current</code> to <code>"page"</code> to indicate that the item represents the current page. Set <code>aria-current</code> to <code>"location"</code> to indicate that the item represents the current location on a page.</p> <h3 class="h3 mb-3">Keyboard Navigation</h3> <p class="mb-3">Items can be activated using a cursor or keyboard:</p> <table class="keyboard-table"> <thead> <tr> <th class="text-left p-2 border-bottom">Key(s)</th> <th class="text-left p-2 border-bottom">Description</th> </tr> </thead> <tbody> <tr> <td class="p-2 border-bottom"><span class="keyboard-key">Enter</span></td> <td class="p-2 border-bottom">Activates the focused item.</td> </tr> <tr> <td class="p-2 border-bottom"><span class="keyboard-key">Tab</span></td> <td class="p-2 border-bottom">Moves focus to the next item.</td> </tr> </tbody> </table> </div> <!-- Related Links --> <div class="demo-section"> <h2 class="h2 mb-3">Related Links</h2> <ul> <li class="mb-2"><a href="#" class="Link">Nav list</a></li> <li class="mb-2"><a href="#" class="Link">Segmented control</a></li> <li class="mb-2"><a href="#" class="Link">Underline panels</a></li> <li class="mb-2"><a href="#" class="Link">Navigation</a></li> </ul> </div> <script> function showTab(event, tabName) { // Hide all tab contents const tabContents = document.querySelectorAll('.tab-content'); tabContents.forEach(content => { content.classList.remove('active'); }); // Remove active state from all nav items const navItems = document.querySelectorAll('.UnderlineNav-item'); navItems.forEach(item => { item.removeAttribute('aria-current'); }); // Show selected tab content document.getElementById(tabName).classList.add('active'); // Set active state on clicked nav item event.target.setAttribute('aria-current', 'page'); } </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">