Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - sidebar
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
<h3>Sidebar Header</h3> <p>The Sidebar header is a container for the application's name and associated icon. It is placed at the top of the Sidebar and can be used to orientate the user to the root of the application they are using.</p> <div class="example-container"> <div class="example-header">Sidebar Header example</div> <div class="example-content"> <div id="header-demo"></div> </div> </div> <h3>Sidebar Body</h3> <p>The <code>SidebarBody</code> component is used to house the main content of the sidebar. Typically, this includes the Sidebar Navigation collection of components that can be used to compose your applications navigation structure.</p> <div class="example-container"> <div class="example-header">Sidebar Body example</div> <div class="example-content"> <div id="body-demo"></div> </div> </div> <h4>Sidebar Beta Badge</h4> <p>The <code>SidebarBetaBadge</code> component is used to indicate that a product or feature is in beta. It should be used in conjunction with the Sidebar navigation items.</p> <div class="example-container"> <div class="example-header">Sidebar Beta Badge example</div> <div class="example-content"> <div id="beta-badge-demo"></div> </div> </div> <h3>Sidebar Footer</h3> <p>The <code>SidebarFooter</code> is used to house the collapse feature of the Sidebar. It is anchored to the foot of the Sidebar and should contain the <code>SidebarCollapseButton</code> component.</p> <div class="example-container"> <div class="example-header">Sidebar Footer example</div> <div class="example-content"> <div id="footer-demo"></div> </div> </div> <h3>Skip links</h3> <p>The Sidebar incorporates a feature known as "Skip links". This feature provides users with the ability to bypass large, repeated content areas, such as navigation. Skip Links are essentially a hidden set of links that facilitate navigation to key points within the application.</p> <div class="accessibility-list"> <p>Within the Sidebar, there are three types of skip links:</p> <ul> <li>Skip to navigation - allows quick access to the site navigation.</li> <li>Skip to Topbar - enables a swift jump to the site's Topbar.</li> <li>Skip to content - provides a fast route to the main content, bypassing both the Sidebar and Topbar.</li> </ul> </div> <p>For these links to function correctly, it's vital to correctly assign unique ID references to the corresponding DOM elements. If these unique ID references are not correctly applied to the target DOM elements and passed to the Sidebar, the Skip Links will not function as intended.</p> </div> <script> // Wait for modules to load setTimeout(() => { if (!window.TwilioPaste) { console.error("Twilio Paste components not loaded"); return; } const { Box, Button, Sidebar, SidebarBody, SidebarHeader, SidebarBetaBadge, SidebarHeaderLabel, SidebarHeaderIconButton, SidebarFooter, SidebarCollapseButton, SidebarNavigation, SidebarNavigationItem, SidebarNavigationDisclosure, SidebarNavigationDisclosureHeading, SidebarNavigationDisclosureHeadingWrapper, SidebarNavigationDisclosureContent, SidebarPushContentWrapper, SidebarOverlayContentWrapper, ProductFlexIcon, ProductHomeIcon, ProductConnectionsIcon, LogoTwilioIcon } = window.TwilioPaste; // State management let compactPushCollapsed = true; let pushCollapsed = false; let compactOverlayCollapsed = true; let overlayCollapsed = false; // Helper function to create React-like elements function createElement(component, props = {}, ...children) { if (typeof component === "string") { const element = document.createElement(component); Object.assign(element, props); children.forEach(child => { if (typeof child === "string") { element.appendChild(document.createTextNode(child)); } else if (child) { element.appendChild(child); } }); return element; } return component(props, ...children); } // Render compact push sidebar demo function renderCompactPushDemo() { const container = document.getElementById("compact-push-demo"); container.innerHTML = ""; const demoContainer = createElement("div", { style: "display: flex; height: 100%; position: relative;" }); // Create sidebar const sidebar = createElement("aside", { style: ` width: ${compactPushCollapsed ? "60px" : "240px"}; background-color: #121c2d; color: white; transition: width 0.3s ease; display: flex; flex-direction: column; position: relative; z-index: 1; ` }); // Header const header = createElement("div", { style: "padding: 16px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 12px;" }); const iconButton = createElement("button", { style: "background: none; border: none; color: white; padding: 8px; border-radius: 4px; cursor: pointer;", title: "Go to Console homepage" }, "🏠"); const label = createElement("span", { style: `opacity: ${compactPushCollapsed ? "0" : "1"}; transition: opacity 0.3s ease; white-space: nowrap;` }, "Twilio Console"); header.appendChild(iconButton); header.appendChild(label); // Body const body = createElement("div", { style: "flex: 1; padding: 16px;" }); // Footer const footer = createElement("div", { style: "padding: 16px; border-top: 1px solid #2d3748;" }); const collapseButton = createElement("button", { style: "background: none; border: 1px solid #4a5568; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%;", onclick: () => { compactPushCollapsed = !compactPushCollapsed; renderCompactPushDemo(); } }, compactPushCollapsed ? "→" : "←"); footer.appendChild(collapseButton); sidebar.appendChild(header); sidebar.appendChild(body); sidebar.appendChild(footer); // Content wrapper const contentWrapper = createElement("div", { style: ` flex: 1; padding: 24px; background-color: #f7fafc; transition: margin-left 0.3s ease; ` }); const toggleButton = createElement("button", { style: "background-color: #0263e0; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer;", onclick: () => { compactPushCollapsed = !compactPushCollapsed; renderCompactPushDemo(); } }, "Toggle Push Sidebar"); contentWrapper.appendChild(toggleButton); demoContainer.appendChild(sidebar); demoContainer.appendChild(contentWrapper); container.appendChild(demoContainer); } // Render push sidebar demo function renderPushDemo() { const container = document.getElementById("push-demo"); container.innerHTML = ""; const demoContainer = createElement("div", { style: "display: flex; height: 100%; position: relative;" }); // Create sidebar const sidebar = createElement("aside", { style: ` width: ${pushCollapsed ? "0px" : "240px"}; background-color: #121c2d; color: white; transition: width 0.3s ease; display: flex; flex-direction: column; position: relative; z-index: 1; overflow: hidden; ` }); if (!pushCollapsed) { // Header const header = createElement("div", { style: "padding: 16px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 12px;" }); const iconButton = createElement("button", { style: "background: none; border: none; color: white; padding: 8px; border-radius: 4px; cursor: pointer;", title: "Go to Console homepage" }, "🏠"); const label = createElement("span", {}, "Twilio Console"); header.appendChild(iconButton); header.appendChild(label); // Body const body = createElement("div", { style: "flex: 1; padding: 16px;" }); // Footer const footer = createElement("div", { style: "padding: 16px; border-top: 1px solid #2d3748;" }); const collapseButton = createElement("button", { style: "background: none; border: 1px solid #4a5568; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%;", onclick: () => { pushCollapsed = !pushCollapsed; renderPushDemo(); } }, "←"); footer.appendChild(collapseButton); sidebar.appendChild(header); sidebar.appendChild(body); sidebar.appendChild(footer); } // Content wrapper const contentWrapper = createElement("div", { style: ` flex: 1; padding: 24px; background-color: #f7fafc; transition: margin-left 0.3s ease; ` }); const toggleButton = createElement("button", { style: "background-color: #0263e0; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer;", onclick: () => { pushCollapsed = !pushCollapsed; renderPushDemo(); } }, "Toggle Push Sidebar"); contentWrapper.appendChild(toggleButton); demoContainer.appendChild(sidebar); demoContainer.appendChild(contentWrapper); container.appendChild(demoContainer); } // Render compact overlay demo function renderCompactOverlayDemo() { const container = document.getElementById("compact-overlay-demo"); container.innerHTML = ""; const demoContainer = createElement("div", { style: "position: relative; height: 100%; background-color: #f7fafc;" }); // Content wrapper (always full width) const contentWrapper = createElement("div", { style: "padding: 24px; height: 100%; box-sizing: border-box;" }); const toggleButton = createElement("button", { style: "background-color: #0263e0; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer;", onclick: () => { compactOverlayCollapsed = !compactOverlayCollapsed; renderCompactOverlayDemo(); } }, "Toggle Overlay Sidebar"); contentWrapper.appendChild(toggleButton); // Create sidebar (overlay) const sidebar = createElement("aside", { style: ` position: absolute; top: 0; left: 0; width: ${compactOverlayCollapsed ? "60px" : "240px"}; height: 100%; background-color: #121c2d; color: white; transition: width 0.3s ease; display: flex; flex-direction: column; z-index: 10; ` }); // Header const header = createElement("div", { style: "padding: 16px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 12px;" }); const iconButton = createElement("button", { style: "background: none; border: none; color: white; padding: 8px; border-radius: 4px; cursor: pointer;", title: "Go to Console homepage" }, "🏠"); const label = createElement("span", { style: `opacity: ${compactOverlayCollapsed ? "0" : "1"}; transition: opacity 0.3s ease; white-space: nowrap;` }, "Twilio Console"); header.appendChild(iconButton); header.appendChild(label); // Body const body = createElement("div", { style: "flex: 1; padding: 16px;" }); // Footer const footer = createElement("div", { style: "padding: 16px; border-top: 1px solid #2d3748;" }); const collapseButton = createElement("button", { style: "background: none; border: 1px solid #4a5568; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%;", onclick: () => { compactOverlayCollapsed = !compactOverlayCollapsed; renderCompactOverlayDemo(); } }, compactOverlayCollapsed ? "→" : "←"); footer.appendChild(collapseButton); sidebar.appendChild(header); sidebar.appendChild(body); sidebar.appendChild(footer); demoContainer.appendChild(contentWrapper); demoContainer.appendChild(sidebar); container.appendChild(demoContainer); } // Render overlay demo function renderOverlayDemo() { const container = document.getElementById("overlay-demo"); container.innerHTML = ""; const demoContainer = createElement("div", { style: "position: relative; height: 100%; background-color: #f7fafc;" }); // Content wrapper (always full width) const contentWrapper = createElement("div", { style: "padding: 24px; height: 100%; box-sizing: border-box;" }); const toggleButton = createElement("button", { style: "background-color: #0263e0; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer;", onclick: () => { overlayCollapsed = !overlayCollapsed; renderOverlayDemo(); } }, "Toggle Overlay Sidebar"); contentWrapper.appendChild(toggleButton); // Create sidebar (overlay) - only if not collapsed if (!overlayCollapsed) { const sidebar = createElement("aside", { style: ` position: absolute; top: 0; left: 0; width: 240px; height: 100%; background-color: #121c2d; color: white; display: flex; flex-direction: column; z-index: 10; ` }); // Header const header = createElement("div", { style: "padding: 16px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 12px;" }); const iconButton = createElement("button", { style: "background: none; border: none; color: white; padding: 8px; border-radius: 4px; cursor: pointer;", title: "Go to Console homepage" }, "🏠"); const label = createElement("span", {}, "Twilio Console"); header.appendChild(iconButton); header.appendChild(label); // Body const body = createElement("div", { style: "flex: 1; padding: 16px;" }); // Footer const footer = createElement("div", { style: "padding: 16px; border-top: 1px solid #2d3748;" }); const collapseButton = createElement("button", { style: "background: none; border: 1px solid #4a5568; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%;", onclick: () => { overlayCollapsed = !overlayCollapsed; renderOverlayDemo(); } }, "←"); footer.appendChild(collapseButton); sidebar.appendChild(header); sidebar.appendChild(body); sidebar.appendChild(footer); demoContainer.appendChild(sidebar); } demoContainer.appendChild(contentWrapper); container.appendChild(demoContainer); } // Render header demo function renderHeaderDemo() { const container = document.getElementById("header-demo"); container.innerHTML = ""; const header = createElement("div", { style: "background-color: #121c2d; color: white; padding: 16px; display: flex; align-items: center; gap: 12px; border-radius: 8px;" }); const iconButton = createElement("button", { style: "background: none; border: none; color: white; padding: 8px; border-radius: 4px; cursor: pointer;", title: "Go to Flex homepage" }, "📱"); const label = createElement("span", {}, "Twilio Console"); header.appendChild(iconButton); header.appendChild(label); container.appendChild(header); } // Render body demo function renderBodyDemo() { const container = document.getElementById("body-demo"); container.innerHTML = ""; const body = createElement("div", { style: "background-color: #121c2d; color: white; padding: 16px; border-radius: 8px;" }); const nav = createElement("nav", { style: "display: flex; flex-direction: column; gap: 8px;" }); const homeItem = createElement("a", { href: "#", style: "color: white; text-decoration: none; padding: 8px 12px; border-radius: 4px; display: flex; align-items: center; gap: 8px; hover: background-color: #2d3748;" }); homeItem.innerHTML = "🏠 Home"; const connectionsGroup = createElement("div", {}); const connectionsHeader = createElement("div", { style: "color: white; padding: 8px 12px; border-radius: 4px; display: flex; align-items: center; gap: 8px; background-color: #2d3748;" }); connectionsHeader.innerHTML = "🔗 Connections"; const overviewItem = createElement("a", { href: "#", style: "color: white; text-decoration: none; padding: 8px 12px 8px 32px; border-radius: 4px; display: block; background-color: #4a5568;" }, "Overview"); connectionsGroup.appendChild(connectionsHeader); connectionsGroup.appendChild(overviewItem); nav.appendChild(homeItem); nav.appendChild(connectionsGroup); body.appendChild(nav); container.appendChild(body); } // Render beta badge demo function renderBetaBadgeDemo() { const container = document.getElementById("beta-badge-demo"); container.innerHTML = ""; const badge = createElement("span", { style: "background-color: #fbbf24; color: #92400e; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;" }, "Beta"); container.appendChild(badge); } // Render footer demo function renderFooterDemo() { const container = document.getElementById("footer-demo"); container.innerHTML = ""; const footer = createElement("div", { style: "background-color: #121c2d; color: white; padding: 16px; border-radius: 8px;" }); const collapseButton = createElement("button", { style: "background: none; border: 1px solid #4a5568; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%;", onclick: () => alert("Sidebar collapsed!") }, "Close sidebar"); footer.appendChild(collapseButton); container.appendChild(footer); } // Initialize all demos renderCompactPushDemo(); renderPushDemo(); renderCompactOverlayDemo(); renderOverlayDemo(); renderHeaderDemo(); renderBodyDemo(); renderBetaBadgeDemo(); renderFooterDemo(); }, 1000); </script></body></html>' width="100%" height="2000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">