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
<p class="mb-4">Tabs in a tab panel should not be links that navigate the user to a new URL. If you want tab-like navigation, use a <a href="/components/tab-nav" class="Link">tab nav</a> instead.</p> <div class="usage-example"> <div class="flex-1"> <p>For example, a tab panel is used to switch between the "Branches" and "Tags" views in the branch selection dialog.</p> </div> <div> <img width="456" role="presentation" src="https://user-images.githubusercontent.com/2313998/231862746-9f35f3a6-6f31-4733-b1af-2bad9cd84745.png" alt="Branch selection dialog example" class="border rounded-2" /> </div> </div> </div> <!-- Interactive Demo --> <div class="tab-panels-demo"> <h3 class="mb-3">Interactive Example</h3> <div class="border rounded-2 p-3"> <div class="tab-list" role="tablist"> <button class="tab-button active" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1"> Branches </button> <button class="tab-button" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2"> Tags </button> <button class="tab-button" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3"> Commits </button> </div> <div class="tab-panel active" role="tabpanel" aria-labelledby="tab-1" id="panel-1"> <h4>Branches</h4> <p>View and manage repository branches. Switch between different development branches to see their specific changes and commits.</p> <ul class="ml-3"> <li>main</li> <li>develop</li> <li>feature/new-component</li> <li>hotfix/critical-bug</li> </ul> </div> <div class="tab-panel" role="tabpanel" aria-labelledby="tab-2" id="panel-2"> <h4>Tags</h4> <p>Browse repository tags and releases. Tags mark specific points in your repository''s history as important.</p> <ul class="ml-3"> <li>v2.1.0</li> <li>v2.0.1</li> <li>v2.0.0</li> <li>v1.9.5</li> </ul> </div> <div class="tab-panel" role="tabpanel" aria-labelledby="tab-3" id="panel-3"> <h4>Commits</h4> <p>View recent commits and their details. Track changes made to the repository over time.</p> <ul class="ml-3"> <li>Fix navigation bug in mobile view</li> <li>Add new tab panel component</li> <li>Update documentation</li> <li>Refactor CSS styles</li> </ul> </div> </div> </div> <!-- Best Practices --> <div class="mb-6"> <h3 class="mb-3">Best practices</h3> <div class="best-practices"> <p class="mb-0">The same best practices apply to tab panels as they do to <a href="/components/tab-nav#best-practices" class="Link">tab nav</a>.</p> </div> </div> <!-- Anatomy Section --> <div class="mb-6"> <h2 class="mb-3">Anatomy</h2> <div class="anatomy-diagram"> <div class="anatomy-label anatomy-tablist">Tab list</div> <div class="tab-list" style="pointer-events: none;"> <button class="tab-button active">Tab 1</button> <button class="tab-button">Tab 2</button> <button class="tab-button">Tab 3</button> </div> <div class="p-4 bg-canvas-subtle rounded-2 mt-3"> <p class="mb-0">This is the tab panel content area where the active tab''s content is displayed.</p> </div> <div class="anatomy-label anatomy-panel">Tab panel</div> </div> <div class="mt-4"> <p><strong>Tab list:</strong> A set of buttons used to switch between views. Each tab should concisely label the view it''s associated with.</p> <p><strong>Tab panel:</strong> The view associated with the active tab.</p> </div> </div> <!-- Options Section --> <div class="mb-6"> <h2 class="mb-3">Options</h2> <p>The same options are available to tab panels as they are to <a href="/components/tab-nav#options" class="Link">tab nav</a>.</p> </div> <!-- Accessibility Section --> <div class="mb-6"> <h2 class="mb-3">Accessibility</h2> <h3 class="mb-3">Keyboard navigation</h3> <div class="usage-example mb-4"> <div class="flex-1"> <p>Tabs, like all interactive elements, can be activated using a cursor or keyboard.</p> <p>When a user moves focus into the <code>tablist</code> using the Tab key, the active tab should be focused. A <code>tablist</code> is only a single Tab stop. Once focused, navigation through the <code>tablist</code> can then conducted with Left, Right, Home, and End keypresses.</p> </div> </div> <h3 class="mb-3">Other a11y guidance</h3> <p class="mb-4">Tab nav and tab panels are almost identical. Reference the <a href="/components/tab-nav#accessibility" class="Link">tab nav accessibility guidelines</a> for more guidance.</p> <table class="keyboard-table"> <thead> <tr> <th>Key(s)</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><span class="kbd">Tab</span></td> <td>Moves focus from the tablist to the tab panel or next focusable node.</td> </tr> <tr> <td><span class="kbd">Enter</span></td> <td>Activates the focused tab.</td> </tr> <tr> <td><span class="kbd">ArrowLeft</span></td> <td>Activates the previous tab. If a user is focused on the first tab, wrap to activate the last tab.</td> </tr> <tr> <td><span class="kbd">ArrowRight</span></td> <td>Activates the next tab. If a user is focused on the last tab, wrap to activate the first tab.</td> </tr> </tbody> </table> <div class="flash flash-warn mt-4"> <strong>Known accessibility issues (GitHub staff only)</strong> <p class="mb-0 mt-2">Please refer to internal accessibility documentation for TabPanels component issues.</p> </div> </div> <!-- Related Links --> <div class="mb-6"> <h2 class="mb-3">Related links</h2> <ul> <li><a href="/components/tab-nav" class="Link">Tab nav</a></li> <li><a href="/components/underline-nav" class="Link">Underline nav</a></li> </ul> </div> <!-- Footer Links --> <div class="border-top pt-4 mt-6"> <p> <a href="https://github.com/primer/design" target="_blank" class="Link">Source code</a> | <a href="https://primer.style/components/tab-panels" target="_blank" class="Link">Usage guidelines</a> | <a href="https://primer.style/components/tab-panels#accessibility" target="_blank" class="Link">Accessibility</a> </p> </div> <script> // Tab functionality document.addEventListener("DOMContentLoaded", function() { const tabButtons = document.querySelectorAll(".tab-button"); const tabPanels = document.querySelectorAll(".tab-panel"); function activateTab(targetTab, targetPanel) { // Remove active class from all tabs and panels tabButtons.forEach(tab => { tab.classList.remove("active"); tab.setAttribute("aria-selected", "false"); }); tabPanels.forEach(panel => panel.classList.remove("active")); // Add active class to target tab and panel targetTab.classList.add("active"); targetTab.setAttribute("aria-selected", "true"); targetPanel.classList.add("active"); } tabButtons.forEach((tab, index) => { tab.addEventListener("click", () => { const targetPanel = document.getElementById(tab.getAttribute("aria-controls")); activateTab(tab, targetPanel); }); // Keyboard navigation tab.addEventListener("keydown", (e) => { let targetIndex; switch(e.key) { case "ArrowLeft": e.preventDefault(); targetIndex = index > 0 ? index - 1 : tabButtons.length - 1; break; case "ArrowRight": e.preventDefault(); targetIndex = index < tabButtons.length - 1 ? index + 1 : 0; break; case "Home": e.preventDefault(); targetIndex = 0; break; case "End": e.preventDefault(); targetIndex = tabButtons.length - 1; break; default: return; } if (targetIndex !== undefined) { const targetTab = tabButtons[targetIndex]; const targetPanel = document.getElementById(targetTab.getAttribute("aria-controls")); activateTab(targetTab, targetPanel); targetTab.focus(); } }); }); }); </script></body></html>' width="100%" height="1800" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">