Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - in-page-navigation
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<li>Each In Page Navigation must specify the selected page. To specify which page is selected, set the <code>currentPage</code> prop to the respective <code><InPageNavigationItem></code>. Doing so will set <code>aria-current="page"</code> on that link.</li> <li>To interact with In Page Navigation using the keyboard, use the tab key to navigate between items and the enter key to select an item.</li> </ul> <!-- Examples --> <h2>Examples</h2> <h3>Horizontal In Page Navigation</h3> <p>Use Horizontal In Page Navigation in most cases.</p> <div class="example-container"> <div id="horizontal-example"></div> </div> <h3>Full width In Page Navigation</h3> <p>Use full-width In Page Navigation to fit the width of a containing element. Each item will expand equally to the same width. The full-width variant is recommended for compact spaces.</p> <div class="example-container"> <div id="fullwidth-example"></div> </div> <h3>Vertical In Page Navigation</h3> <p>Use Vertical In Page Navigation when creating a second layer of hierarchy underneath a horizontal or full-width In Page Navigation.</p> <p>Place this vertical In Page Navigation on the left side of the page, and wrap it in a Box with a right margin of <code>space-110</code>.</p> <div class="example-container"> <div id="vertical-example"></div> </div> <!-- Composition Notes --> <h2>Composition notes</h2> <p>Don't add interactive elements to an In Page Navigation item since it makes it difficult for users of assistive technologies to focus or click on an item.</p> <p>In Page Navigation labels should be short to improve readability. Users should be able to easily scan the items and know what type of content to expect. Try to keep labels to 1-2 words each.</p> <p>Labels should be parallel parts of speech. For example, all nouns (Documents, Images, Downloads).</p> <!-- Do/Don't Examples --> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use In Page Navigation for navigating users to different but related pages, such as different pages of settings.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use In Page Navigation when swapping between views on the same page. Use Tabs instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Keep In Page Navigation labels concise.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use more than 2 words in an In Page Navigation label, unless absolutely necessary.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for modules to load setTimeout(() => { // Basic Example const basicContainer = document.getElementById("basic-example"); if (basicContainer && window.InPageNavigation && window.InPageNavigationItem) { const basicNav = document.createElement("div"); basicNav.innerHTML = ` <nav aria-label="Product settings"> <ul style="display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #E1E3EA;"> <li style="margin-right: 32px;"> <a href="#general" style="display: block; padding: 12px 0; color: #0263E0; text-decoration: none; border-bottom: 2px solid #0263E0; font-weight: 600;" aria-current="page">General</a> </li> <li style="margin-right: 32px;"> <a href="#usage" style="display: block; padding: 12px 0; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent;">Usage</a> </li> <li style="margin-right: 32px;"> <a href="#phone-numbers" style="display: block; padding: 12px 0; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent;">Phone numbers</a> </li> </ul> </nav> `; basicContainer.appendChild(basicNav); } // Horizontal Example const horizontalContainer = document.getElementById("horizontal-example"); if (horizontalContainer) { const horizontalNav = document.createElement("div"); horizontalNav.innerHTML = ` <nav aria-label="Account settings"> <ul style="display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #E1E3EA;"> <li style="margin-right: 32px;"> <a href="#profile" style="display: block; padding: 12px 0; color: #0263E0; text-decoration: none; border-bottom: 2px solid #0263E0; font-weight: 600;" aria-current="page">Profile</a> </li> <li style="margin-right: 32px;"> <a href="#security" style="display: block; padding: 12px 0; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent;">Security</a> </li> <li style="margin-right: 32px;"> <a href="#billing" style="display: block; padding: 12px 0; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent;">Billing</a> </li> </ul> </nav> `; horizontalContainer.appendChild(horizontalNav); } // Full Width Example const fullwidthContainer = document.getElementById("fullwidth-example"); if (fullwidthContainer) { const fullwidthNav = document.createElement("div"); fullwidthNav.innerHTML = ` <nav aria-label="Dashboard sections"> <ul style="display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #E1E3EA;"> <li style="flex: 1;"> <a href="#overview" style="display: block; padding: 12px 16px; color: #0263E0; text-decoration: none; border-bottom: 2px solid #0263E0; font-weight: 600; text-align: center;" aria-current="page">Overview</a> </li> <li style="flex: 1;"> <a href="#analytics" style="display: block; padding: 12px 16px; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent; text-align: center;">Analytics</a> </li> <li style="flex: 1;"> <a href="#reports" style="display: block; padding: 12px 16px; color: #606B85; text-decoration: none; border-bottom: 2px solid transparent; text-align: center;">Reports</a> </li> </ul> </nav> `; fullwidthContainer.appendChild(fullwidthNav); } // Vertical Example const verticalContainer = document.getElementById("vertical-example"); if (verticalContainer) { const verticalNav = document.createElement("div"); verticalNav.innerHTML = ` <div style="margin-right: 32px; max-width: 200px;"> <nav aria-label="API documentation"> <ul style="list-style: none; padding: 0; margin: 0;"> <li style="margin-bottom: 8px;"> <a href="#getting-started" style="display: block; padding: 8px 12px; color: #0263E0; text-decoration: none; background: #EBF4FF; border-radius: 4px; font-weight: 600;" aria-current="page">Getting started</a> </li> <li style="margin-bottom: 8px;"> <a href="#authentication" style="display: block; padding: 8px 12px; color: #606B85; text-decoration: none; border-radius: 4px;">Authentication</a> </li> <li style="margin-bottom: 8px;"> <a href="#endpoints" style="display: block; padding: 8px 12px; color: #606B85; text-decoration: none; border-radius: 4px;">Endpoints</a> </li> <li style="margin-bottom: 8px;"> <a href="#examples" style="display: block; padding: 8px 12px; color: #606B85; text-decoration: none; border-radius: 4px;">Examples</a> </li> </ul> </nav> </div> `; verticalContainer.appendChild(verticalNav); } // Add hover effects const links = document.querySelectorAll("nav a"); links.forEach(link => { link.addEventListener("mouseenter", function() { if (!this.hasAttribute("aria-current")) { this.style.color = "#0263E0"; } }); link.addEventListener("mouseleave", function() { if (!this.hasAttribute("aria-current")) { this.style.color = "#606B85"; } }); }); }, 100); </script></body></html>' width="100%" height="1800" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">