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
<li class="mb-2">If a user navigates to a different tab panel, form data should not be automatically saved or submitted. Changes must be explicitly be saved or submitted.</li> <li class="mb-2">Avoid nesting a tab nav within another tab nav view's content.</li> <li class="mb-2">Don't force users to switch between multiple tabs to compare info. Each tab panel should have all of the information a user needs to complete their task.</li> <li class="mb-2">Don't nest buttons or links in the tab title. The tab is already a link or button, so it cannot have a child element that is also a link or button.</li> </ul> </div> <!-- Anatomy Section --> <div class="mb-6"> <h2 class="h2 mb-3">Anatomy</h2> <img class="anatomy-image" src="https://user-images.githubusercontent.com/2313998/231862815-e28a4a38-dfc9-4b7f-ad12-2a312619fcea.png" alt="Tab nav anatomy diagram" /> <div class="mt-3"> <p class="mb-2"><strong>Links:</strong> A set of links used to switch between views. Each tab should concisely label the view it's associated with.</p> <p><strong>View:</strong> The view associated with the active tab.</p> </div> </div> <!-- Options Section --> <div class="mb-6"> <h2 class="h2 mb-3">Options</h2> <img class="options-image" src="https://user-images.githubusercontent.com/2313998/229872878-1ad42b2f-28ea-43ff-b09f-02f2edf6b536.png" alt="Tab nav options and variations" /> <h3 class="h3 mt-4 mb-3">With related content after the tabs</h3> <p class="mb-4">Content or an action may be shown after the tabs as long as it's something that's relevant to the content in all of the tab panels. For example, a diff is shown after the tabs on a pull request.</p> <p class="mb-4">However, the related content's element(s) should be a sibling of the element that wraps the tabs, not a child.</p> <h3 class="h3 mb-3">Tabs with counts</h3> <p class="mb-3">A <a href="/components/counter-label">counter label</a> may be used to show a count after the text label if the tab contains enumerable content that would be helpful for users to know without activating the tab.</p> <div class="tab-nav-demo"> <nav class="tabnav tab-nav-with-count" aria-label="Repository with counts"> <div class="tabnav-tabs"> <a href="#" class="tabnav-tab" aria-current="page"> Conversation <span class="Counter">10</span> </a> <a href="#" class="tabnav-tab"> Commits <span class="Counter">4</span> </a> <a href="#" class="tabnav-tab"> Files changed <span class="Counter">2</span> </a> </div> </nav> </div> <h3 class="h3 mt-4 mb-3">Tabs with icons</h3> <p class="mb-3">An icon may be shown before the tab's text label to help users understand the purpose of the tab. For example, the number of files changed on a pull request's "Files changed" tab.</p> <div class="tab-nav-demo"> <nav class="tabnav tab-nav-with-icon" aria-label="Repository with icons"> <div class="tabnav-tabs"> <a href="#" class="tabnav-tab" aria-current="page"> <svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" width="16" height="16"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215L12.5 13.44V12.25a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> Conversation </a> <a href="#" class="tabnav-tab"> <svg class="octicon octicon-git-commit" viewBox="0 0 16 16" width="16" height="16"> <path d="M10.5 7.75a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm1.43.75a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.001 4.001 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5h-3.32Z"></path> </svg> Commits </a> <a href="#" class="tabnav-tab"> <svg class="octicon octicon-diff" viewBox="0 0 16 16" width="16" height="16"> <path d="M2.75 1.75C2.75.784 3.534 0 4.5 0h7c.966 0 1.75.784 1.75 1.75v12.5A1.75 1.75 0 0 1 11.5 16h-7a1.75 1.75 0 0 1-1.75-1.75Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h7a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Z"></path> <path d="M6 3.25a.75.75 0 0 1 .75.75v.69l.22-.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L6.5 6.44l1.53 1.53a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.75 8.81V9.5a.75.75 0 0 1-1.5 0V4A.75.75 0 0 1 6 3.25ZM2.5 7.25a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1 0-1.5h.5ZM4.5 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h.5Z"></path> </svg> Files changed </a> </div> </nav> </div> </div> <!-- Accessibility Section --> <div class="mb-6"> <h2 class="h2 mb-3">Accessibility</h2> <p class="mb-3">Each tab must have a unique text label for assistive technologies like screen readers. Avoid using tabs that only use an icon as their label. If an icon makes the tab easier to understand, consider pairing the icon with a text label.</p> <p class="mb-4">Tabs may not overflow their container - they must be clickable without requiring the user to horizontally scroll. This is a violation of the <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html" target="_blank">WCAG reflow criteria</a>.</p> <h3 class="h3 mb-3">Labeling counts</h3> <p class="mb-3">If your tab shows a count of items, screen readers will read the number immediately after the tab's label. Consider whether it would sound awkward to the user, and add visually hidden text to help make it easier to understand what the number is for.</p> <p class="mb-3">For example, "Conversation 10" is confusing because there's no context for what the "10" is referring to. Instead, we can write our markup so screen readers will say "Conversation 10 comments".</p> <div class="Box p-3 mb-4"> <h4 class="h4 mb-2">Example with screen reader text:</h4> <pre class="bg-gray-light p-2 rounded"><code><span> Commits <div class="Counter">4<span class="sr-only">&nbsp;comments</span></div></span></code></pre> </div> <h3 class="h3 mb-3">Keyboard navigation</h3> <p class="mb-4">Each link in the tab nav should be a single Tab stop. The arrow keys should not move focus between tabs or activate tabs.</p> <div class="flash flash-warn mb-4"> <h4 class="h4 mb-2">Known accessibility issues (GitHub staff only)</h4> <p>For internal accessibility information, please refer to the accessibility documentation.</p> </div> </div> <!-- Related Links Section --> <div class="mb-6"> <h2 class="h2 mb-3">Related links</h2> <ul> <li class="mb-2"><a href="/components/nav-list">Nav list</a></li> <li class="mb-2"><a href="/components/tab-panels">Tab panels</a></li> <li class="mb-2"><a href="/components/underline-nav">Underline nav</a></li> </ul> </div> <!-- Footer --> <div class="border-top pt-4 mt-6"> <h2 class="h3 mb-3">Feedback</h2> <p class="color-fg-muted"> Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub. </p> </div> <script> // Simple tab switching functionality for demo document.addEventListener('DOMContentLoaded', function() { const tabNavs = document.querySelectorAll('.tabnav'); tabNavs.forEach(nav => { const tabs = nav.querySelectorAll('.tabnav-tab'); tabs.forEach(tab => { tab.addEventListener('click', function(e) { e.preventDefault(); // Remove active state from all tabs in this nav tabs.forEach(t => t.removeAttribute('aria-current')); // Add active state to clicked tab this.setAttribute('aria-current', 'page'); // Update demo content if it exists const demoContent = nav.parentElement.querySelector('.demo-content'); if (demoContent) { const tabText = this.textContent.trim().split('\n')[0]; demoContent.innerHTML = `<p><strong>${tabText} tab content:</strong> This is where the ${tabText.toLowerCase()} content would be displayed.</p>`; } }); }); }); }); </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">