Sidebar
Thymeleaf source
<sl:skip-link/><sl:sidebar-provider> <sl:sidebar variant="inset" collapsible="icon"> <sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:dropdown-menu id="team-switcher"> <sl:dropdown-menu-trigger as="sidebar-menu-button" size="lg" tooltip="Acme Inc."> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Acme Inc.</strong> <small>Enterprise</small> <sl:slot name="icon-end"><sl:icon name="chevrons-up-down"/></sl:slot> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-label id="team-switcher-label">Teams</sl:dropdown-menu-label> <sl:dropdown-menu-radio-group aria-labelledby="team-switcher-label"> <sl:dropdown-menu-radio-item as="a" href="/teams/acme-inc" checked> Acme Inc. </sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" href="/teams/acme-corp"> Acme Corp. </sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" href="/teams/evil-corp"> Evil Corp. </sl:dropdown-menu-radio-item> </sl:dropdown-menu-radio-group> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" href="/teams/new"> <sl:icon name="plus"/> Add team </sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group id="platform"> <sl:sidebar-group-label>Platform</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" th:active="${#slNav.current('/')}" tooltip="Home"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Home </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item id="inbox"> <sl:sidebar-menu-button href="/inbox" th:active="${#slNav.current('/inbox')}" tooltip="Inbox"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button> <sl:sidebar-menu-badge label="12 unread">12</sl:sidebar-menu-badge> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/calendar" th:active="${#slNav.current('/calendar')}" tooltip="Calendar"> <sl:slot name="icon-start"><sl:icon name="calendar"/></sl:slot> Calendar </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item collapsible th:open="${#slNav.current('/documents')}"> <sl:sidebar-menu-button tooltip="Documents"> <sl:slot name="icon-start"><sl:icon name="file-text"/></sl:slot> Documents </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/documents" th:active="${#slNav.current('/documents', true)}"> Recent </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/documents/shared" th:active="${#slNav.current('/documents/shared')}"> Shared with me </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="projects"> <sl:sidebar-group-label>Projects</sl:sidebar-group-label> <sl:sidebar-group-action aria-label="Add project"><sl:icon name="plus"/></sl:sidebar-group-action> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/design" tooltip="Design Engineering"> <sl:slot name="icon-start"><sl:icon name="frame"/></sl:slot> Design Engineering </sl:sidebar-menu-button> <sl:dropdown-menu id="project-design-more"> <sl:dropdown-menu-trigger as="sidebar-menu-action" show-on-hover aria-label="More for Design Engineering"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" href="/projects/design"> <sl:icon name="folder"/> View project </sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" href="/projects/design/share"> <sl:icon name="forward"/> Share project </sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" href="/projects/design/delete" variant="destructive"> <sl:icon name="trash-2"/> Delete project </sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/sales" tooltip="Sales & Marketing"> <sl:slot name="icon-start"><sl:icon name="chart-pie"/></sl:slot> Sales & Marketing </sl:sidebar-menu-button> <sl:sidebar-menu-action aria-label="More for Sales & Marketing" show-on-hover> <sl:icon name="ellipsis"/> </sl:sidebar-menu-action> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> <sl:sidebar-footer> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings" size="sm" th:active="${#slNav.current('/settings')}" tooltip="Settings"> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/help" size="sm" tooltip="Help"> <sl:slot name="icon-start"><sl:icon name="life-buoy"/></sl:slot> Help </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> <sl:user-menu> <sl:dropdown-menu-item as="a" href="/account"><sl:icon name="badge-check"/>Account</sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" href="/notifications"><sl:icon name="bell"/>Notifications</sl:dropdown-menu-item> </sl:user-menu> </sl:sidebar-footer> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger/> <sl:separator orientation="vertical"/> <sl:breadcrumb> <sl:breadcrumb-list> <sl:breadcrumb-item>Platform</sl:breadcrumb-item> <sl:breadcrumb-separator/> <sl:breadcrumb-item><sl:breadcrumb-page>Home</sl:breadcrumb-page></sl:breadcrumb-item> </sl:breadcrumb-list> </sl:breadcrumb> </sl:site-header> <h1>Home</h1> <p>The page's content.</p> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<a class="skip-link" href="#main">Skip to main content</a><div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar" popover aria-label="Main" data-variant="inset" data-collapsible="icon"> <div class="sidebar-header"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <button class="sidebar-menu-button dropdown-menu-trigger" type="button" data-size="lg" id="team-switcher-trigger" popovertarget="team-switcher" aria-haspopup="menu"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Acme Inc.</strong> <small>Enterprise</small> </span> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m7 15 5 5 5-5"></path> <path d="m7 9 5-5 5 5"></path> </svg> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Acme Inc. <span class="tooltip-arrow" aria-hidden="true"></span> </span> </button> <div class="dropdown-menu-content" id="team-switcher" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="team-switcher-trigger" data-side="right"> <div class="dropdown-menu-label" id="team-switcher-label">Teams</div> <div class="dropdown-menu-radio-group" role="group" aria-labelledby="team-switcher-label"> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="true" href="/teams/acme-inc"> Acme Inc. <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/teams/acme-corp"> Acme Corp. <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/teams/evil-corp"> Evil Corp. <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> </div> <div class="dropdown-menu-separator" role="separator"></div> <a class="dropdown-menu-item" role="menuitem" href="/teams/new"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> Add team </a> </div> </li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-group" id="platform" role="group" aria-labelledby="platform-label"> <div class="sidebar-group-label" id="platform-label">Platform</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Home</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Home <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> <li class="sidebar-menu-item" id="inbox"> <a class="sidebar-menu-button" aria-describedby="inbox-badge" href="/inbox"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> <span class="sidebar-menu-button-label">Inbox</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Inbox <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> <div class="sidebar-menu-badge" id="inbox-badge"> <span aria-hidden="true">12</span> <span class="sl-sr-only">12 unread</span> </div> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/calendar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M8 2v3"></path> <path d="M16 2v3"></path> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <span class="sidebar-menu-button-label">Calendar</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Calendar <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> <li class="sidebar-menu-item"> <details class="sidebar-menu-collapsible"> <summary class="sidebar-menu-button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path> <path d="M14 2v5a1 1 0 0 0 1 1h5"></path> <path d="M10 9H8"></path> <path d="M16 13H8"></path> <path d="M16 17H8"></path> </svg> <span class="sidebar-menu-button-label">Documents</span> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-menu-button-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Documents <span class="tooltip-arrow" aria-hidden="true"></span> </span> </summary> <ul class="sidebar-menu-sub"> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/documents"> <span class="sidebar-menu-sub-button-label">Recent</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/documents/shared"> <span class="sidebar-menu-sub-button-label">Shared with me</span> </a> </li> </ul> </details> </li> </ul> </div> </div> <div class="sidebar-group" id="projects" role="group" aria-labelledby="projects-label"> <div class="sidebar-group-label" id="projects-label">Projects</div> <button class="sidebar-group-action" type="button" aria-label="Add project"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/design"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <line x1="22" x2="2" y1="6" y2="6"></line> <line x1="22" x2="2" y1="18" y2="18"></line> <line x1="6" x2="6" y1="2" y2="22"></line> <line x1="18" x2="18" y1="2" y2="22"></line> </svg> <span class="sidebar-menu-button-label">Design Engineering</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Design Engineering <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> <button class="sidebar-menu-action dropdown-menu-trigger" type="button" data-show-on-hover="true" id="project-design-more-trigger" popovertarget="project-design-more" aria-haspopup="menu" aria-label="More for Design Engineering"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> </button> <div class="dropdown-menu-content" id="project-design-more" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="project-design-more-trigger" data-side="right"> <a class="dropdown-menu-item" role="menuitem" href="/projects/design"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path> </svg> View project </a> <a class="dropdown-menu-item" role="menuitem" href="/projects/design/share"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m15 17 5-5-5-5"></path> <path d="M4 18v-2a4 4 0 0 1 4-4h12"></path> </svg> Share project </a> <div class="dropdown-menu-separator" role="separator"></div> <a class="dropdown-menu-item" role="menuitem" data-variant="destructive" href="/projects/design/delete"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M10 11v6"></path> <path d="M14 11v6"></path> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path> <path d="M3 6h18"></path> <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> </svg> Delete project </a> </div> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/sales"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"></path> <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path> </svg> <span class="sidebar-menu-button-label">Sales & Marketing</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Sales & Marketing <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> <button class="sidebar-menu-action" type="button" data-show-on-hover="true" aria-label="More for Sales & Marketing"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> </button> </li> </ul> </div> </div> </div> <div class="sidebar-footer"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/settings"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span class="sidebar-menu-button-label">Settings</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Settings <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/help"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.93 4.93 4.24 4.24"></path> <path d="m14.83 9.17 4.24-4.24"></path> <path d="m14.83 14.83 4.24 4.24"></path> <path d="m9.17 14.83-4.24 4.24"></path> <circle cx="12" cy="12" r="4"></circle> </svg> <span class="sidebar-menu-button-label">Help</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Help <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> </ul> <ul class="sidebar-menu user-menu"> <li class="sidebar-menu-item"> <button class="sidebar-menu-button dropdown-menu-trigger user-menu-trigger" type="button" data-size="lg" id="user-menu-trigger" popovertarget="user-menu" aria-haspopup="menu"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,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"> <span class="avatar-fallback">S</span> </span> <span class="sidebar-menu-button-label"> <strong>shadcn</strong> <small>m@example.com</small> </span> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m7 15 5 5 5-5"></path> <path d="m7 9 5-5 5 5"></path> </svg> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> shadcn <span class="tooltip-arrow" aria-hidden="true"></span> </span> </button> <div class="dropdown-menu-content user-menu-content" id="user-menu" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="user-menu-trigger" data-side="right" data-align="end"> <div class="dropdown-menu-label user-menu-label"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,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"> <span class="avatar-fallback">S</span> </span> <span class="user-menu-text"> <span class="user-menu-name">shadcn</span> <span class="user-menu-detail">m@example.com</span> </span> </div> <div class="dropdown-menu-separator" role="separator"></div> <a class="dropdown-menu-item" role="menuitem" href="/account"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path> <path d="m16 9-5.5 5.5L8 12"></path> </svg> Account </a> <a class="dropdown-menu-item" role="menuitem" href="/notifications"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M10.268 21a2 2 0 0 0 3.464 0"></path> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path> </svg> Notifications </a> <div class="dropdown-menu-separator" role="separator"></div> <button type="submit" class="dropdown-menu-item user-menu-sign-out" role="menuitem" form="user-menu-sign-out"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m16 17 5-5-5-5"></path> <path d="M21 12H9"></path> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> </svg> Sign out </button> </div> <form id="user-menu-sign-out" class="user-menu-sign-out-form" method="post" action="/logout" hx-boost="false" hidden></form> </li> </ul> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar" aria-controls="sidebar" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> <div class="separator" data-orientation="vertical" role="none"></div> <nav class="breadcrumb" aria-label="Breadcrumb"> <ol class="breadcrumb-list"> <li class="breadcrumb-item">Platform</li> <li class="breadcrumb-separator" role="presentation" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="icon breadcrumb-separator-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </li> <li class="breadcrumb-item"> <span class="breadcrumb-page" aria-current="page">Home</span> </li> </ol> </nav> </header> <h1>Home</h1> <p>The page's content.</p> </main></div>Built from parts
Section titled “Built from parts”An application shell with a sidebar is four components, as in shadcn/ui:
<sl:sidebar-provider>wraps the whole page and holds the state: is the sidebar expanded or collapsed on a desktop.<sl:sidebar>is the navigation itself: a<nav>landmark named “Main”.<sl:sidebar-inset>is the page’s<main>, beside the sidebar:<main id="main" tabindex="-1">, the target of the skip link.<sl:sidebar-trigger>is the icon button that collapses the sidebar, or opens it on a phone. It usually sits in a header at the top of the inset.
<body><sl:skip-link/><sl:sidebar-provider> <sl:sidebar> <!-- header, content with groups and menus, footer: see "What goes inside" below --> </sl:sidebar> <sl:sidebar-inset> <header> <sl:sidebar-trigger/> <sl:separator orientation="vertical"/> <sl:breadcrumb>...</sl:breadcrumb> </header> <div th:replace="${content}"></div> </sl:sidebar-inset></sl:sidebar-provider></body>Put the sidebar straight inside the provider (not in an element of your own): the CSS that collapses it looks for it there.
The skip link comes first in the body: the sidebar puts many links before the content, and it lets a keyboard user jump past them to the inset. The header at the top of the inset holds the trigger, a vertical separator and the breadcrumb, as shadcn’s blocks have it. Lay it out as a row yourself, or use a site header, which does it for you, as the Collapses to icons layout does.
What goes inside
Section titled “What goes inside”The sidebar holds a header, the content and a footer, with shadcn/ui’s names:
<sl:sidebar-header>at the top (the application or team) and<sl:sidebar-footer>at the bottom (settings, help, the signed-in user’s user menu). They stay in view.<sl:sidebar-content>between them, which scrolls when there is more than fits. It is a plaindiv: the sidebar itself is the navigation landmark.<sl:sidebar-separator>draws a line between parts; screen readers skip it.
The content is made of groups, and each group of a menu:
<sl:sidebar> <sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/}" size="lg"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Acme Inc.</strong> <small>Enterprise</small> </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group id="platform"> <sl:sidebar-group-label>Platform</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/people}" th:active="${#slNav.current('/people')}"> <sl:slot name="icon-start"><sl:icon name="users"/></sl:slot> People </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> <sl:sidebar-footer>...</sl:sidebar-footer></sl:sidebar><sl:sidebar-group>with a<sl:sidebar-group-label>is a group named by its label: a screen reader says “Platform, group” when the focus moves into it. The label’s id is the group’sidwith-label; without anidthe group generates one on every render. Without a label, a group is a plaindiv.<sl:sidebar-group-content>holds the group’s menu, below the label.<sl:sidebar-menu>is a list (ul), so a screen reader says how many entries it has, and<sl:sidebar-menu-item>one entry (li).<sl:sidebar-menu-button>is the link: an icon in theicon-startslot (andicon-endfor one at the end), then the label, which ends in an ellipsis when it does not fit. For two lines, put each in an element of its own, such as<strong>and<small>.
Menu buttons
Section titled “Menu buttons”A menu button is a link (as="a", the default), or with as="button" a button, for an action that is no page of its
own; every attribute that is no prop passes through, so hx-get or commandfor work as on any button. size is
default, sm (a dense list, such as the footer’s) or lg (two lines, such as the application’s name in the
header), and variant="outline" adds a background and a border. disabled works as on <sl:button>: a disabled link
loses its href and leaves the tab order.
Thymeleaf source
<sl:sidebar-provider> <sl:sidebar id="sidebar-buttons"> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" size="lg"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Large</strong> <small>Two lines</small> </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Default </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" size="sm"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Small </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" variant="outline"> <sl:slot name="icon-start"><sl:icon name="square-dashed"/></sl:slot> Outline </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button as="button" active> <sl:slot name="icon-start"><sl:icon name="file-pen"/></sl:slot> Drafts (a button) </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/billing" disabled> <sl:slot name="icon-start"><sl:icon name="credit-card"/></sl:slot> Disabled link </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/a-page-with-a-very-long-name"> <sl:slot name="icon-start"><sl:icon name="file-text"/></sl:slot> A label too long for the sidebar ends in an ellipsis </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-buttons"/> </sl:site-header> <h1>Menu buttons</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar-buttons" popover aria-label="Main"> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="lg" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Large</strong> <small>Two lines</small> </span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Default</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Small</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-variant="outline" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M5 3a2 2 0 0 0-2 2"></path> <path d="M19 3a2 2 0 0 1 2 2"></path> <path d="M21 19a2 2 0 0 1-2 2"></path> <path d="M5 21a2 2 0 0 1-2-2"></path> <path d="M9 3h1"></path> <path d="M9 21h1"></path> <path d="M14 3h1"></path> <path d="M14 21h1"></path> <path d="M3 9v1"></path> <path d="M21 9v1"></path> <path d="M3 14v1"></path> <path d="M21 14v1"></path> </svg> <span class="sidebar-menu-button-label">Outline</span> </a> </li> <li class="sidebar-menu-item"> <button class="sidebar-menu-button" type="button" aria-current="true"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"></path> <path d="M14 2v5a1 1 0 0 0 1 1h5"></path> <path d="M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"></path> </svg> <span class="sidebar-menu-button-label">Drafts (a button)</span> </button> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-disabled="true" role="link" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> <path d="M6 14h2"></path> </svg> <span class="sidebar-menu-button-label">Disabled link</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/a-page-with-a-very-long-name"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path> <path d="M14 2v5a1 1 0 0 0 1 1h5"></path> <path d="M10 9H8"></path> <path d="M16 13H8"></path> <path d="M16 17H8"></path> </svg> <span class="sidebar-menu-button-label">A label too long for the sidebar ends in an ellipsis</span> </a> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-buttons" aria-controls="sidebar-buttons" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Menu buttons</h1> </main></div>The current page
Section titled “The current page”active marks the current page: the link gets aria-current="page", which a screen reader says (“current page”), and
the accent background. A menu button that is a button gets aria-current="true" (“current”).
A layout usually has no model attribute saying which page it shows. #slNav.current(path) asks the request:
<sl:sidebar-menu-button th:href="@{/people}" th:active="${#slNav.current('/people')}">People</sl:sidebar-menu-button>- The path is the application’s own, as in
@{/people}: a context path makes no difference. - It is the current page for
/peopleand for every page below it, such as/people/12/edit, but not for/peoples.#slNav.current('/people', true)is only/peopleitself. /is only the current page for/itself, or Home would be current on every page.- A query string and a trailing slash are ignored:
/people?page=2is/people.
On a phone the panel opens with the focus on the current page’s link. With hx-boost on the body every page comes
from the server with the right link marked; an application that swaps only the main area leaves the old one marked,
unless it swaps the menu too (out of band).
Badges
Section titled “Badges”<sl:sidebar-menu-badge> puts a count at the end of a menu button, inside the same menu item:
<sl:sidebar-menu-item id="inbox"> <sl:sidebar-menu-button th:href="@{/inbox}"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button> <sl:sidebar-menu-badge th:label="${unread + ' unread'}">[[${unread}]]</sl:sidebar-menu-badge></sl:sidebar-menu-item>The button is described by the badge (aria-describedby), so when Tab reaches it a screen reader says “Inbox, link,
12 unread”. label is what it says instead of the bare number. The badge’s id is the item’s id with -badge;
without an id the item generates one on every render.
Actions
Section titled “Actions”<sl:sidebar-group-action> is an icon button at the end of a group’s label (“Add project”), and
<sl:sidebar-menu-action> one at the end of a menu item, beside its button (“More”). Both hold only an icon, so they
need an aria-label; name the entry too, as every item has one (“More for Design Engineering”). With as="a" they are
links. show-on-hover on a menu action hides it on a desktop until the pointer is over its item or the focus is in
it; on a phone it is always there. A menu action is 24 px, the minimum target size of WCAG 2.2 (shadcn’s is 20 px);
a group action is 20 px on a desktop, where nothing is close to it, and 24 px on a phone. A “More” that opens a menu is
a menu trigger.
<sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/projects/{id}(id=${project.id})}">[[${project.name}]]</sl:sidebar-menu-button> <sl:sidebar-menu-action th:aria-label="|More for ${project.name}|" show-on-hover> <sl:icon name="ellipsis"/> </sl:sidebar-menu-action></sl:sidebar-menu-item>Menus in the sidebar
Section titled “Menus in the sidebar”A dropdown menu opens from a sidebar part when its trigger says so: <sl:dropdown-menu-trigger as="sidebar-menu-button">
renders a menu button, as="sidebar-menu-action" a menu action (shadcn’s <DropdownMenuTrigger asChild>). The trigger
takes the part’s props (size, variant, tooltip; show-on-hover) and its icon-start and icon-end slots, and
any other attribute passes through. Put the <sl:dropdown-menu> in the <sl:sidebar-menu-item>, where the part would
be. The default example above has three: a team switcher in the header, “More” beside Design Engineering, and the
user menu in the footer, which is one component.
<sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:dropdown-menu id="team-switcher"> <sl:dropdown-menu-trigger as="sidebar-menu-button" size="lg" th:tooltip="${team.name}"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>[[${team.name}]]</strong> <small>[[${team.plan}]]</small> <sl:slot name="icon-end"><sl:icon name="chevrons-up-down"/></sl:slot> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-label id="team-switcher-label">Teams</sl:dropdown-menu-label> <sl:dropdown-menu-radio-group aria-labelledby="team-switcher-label"> <sl:dropdown-menu-radio-item as="a" th:each="t : ${teams}" th:href="@{/teams/{id}(id=${t.id})}" th:checked="${t.id == team.id}">[[${t.name}]]</sl:dropdown-menu-radio-item> </sl:dropdown-menu-radio-group> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" th:href="@{/teams/new}"><sl:icon name="plus"/>Add team</sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu></sl:sidebar-header><sl:sidebar-menu-item th:each="project : ${projects}"> <sl:sidebar-menu-button th:href="@{/projects/{id}(id=${project.id})}">[[${project.name}]]</sl:sidebar-menu-button> <sl:dropdown-menu th:id="|project-${project.id}-more|"> <sl:dropdown-menu-trigger as="sidebar-menu-action" show-on-hover th:aria-label="|More for ${project.name}|"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" th:href="@{/projects/{id}(id=${project.id})}">View project</sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item variant="destructive" hx:get="@{/projects/{id}/delete(id=${project.id})}" hx-target="#modal-root">Delete project</sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu></sl:sidebar-menu-item>The current team or version is a checked radio item: a menu of links, one per team (or version), the current one checked by the server. A screen reader says “Acme Inc., radio menu item, checked”, the check mark shows it, and it works without JavaScript, as the radio items of a sort menu do. The menu is labelled by its trigger; the group of teams by the label above it.
A version switcher (shadcn’s sidebar-01) is the same menu with the versions, opened from the header’s large menu button:
Thymeleaf source
<sl:sidebar-provider> <sl:sidebar id="sidebar-versions"> <sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:dropdown-menu id="version-switcher"> <sl:dropdown-menu-trigger as="sidebar-menu-button" size="lg"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Documentation</strong> <small>v1.0.1</small> <sl:slot name="icon-end"><sl:icon name="chevrons-up-down"/></sl:slot> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content> <sl:dropdown-menu-radio-group aria-label="Versions"> <sl:dropdown-menu-radio-item as="a" href="/docs/1.0.1" checked>v1.0.1</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" href="/docs/1.1.0-alpha">v1.1.0-alpha</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" href="/docs/2.0.0-beta1">v2.0.0-beta1</sl:dropdown-menu-radio-item> </sl:dropdown-menu-radio-group> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-label>Getting started</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/docs/installation">Installation</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/docs/project-structure">Project structure</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-versions"/> </sl:site-header> <h1>Installation</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar-versions" popover aria-label="Main"> <div class="sidebar-header"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <button class="sidebar-menu-button dropdown-menu-trigger" type="button" data-size="lg" id="version-switcher-trigger" popovertarget="version-switcher" aria-haspopup="menu"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Documentation</strong> <small>v1.0.1</small> </span> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m7 15 5 5 5-5"></path> <path d="m7 9 5-5 5 5"></path> </svg> </button> <div class="dropdown-menu-content" id="version-switcher" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="version-switcher-trigger"> <div class="dropdown-menu-radio-group" role="group" aria-label="Versions"> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="true" href="/docs/1.0.1"> v1.0.1 <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/docs/1.1.0-alpha"> v1.1.0-alpha <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> <a class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" href="/docs/2.0.0-beta1"> v2.0.0-beta1 <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </a> </div> </div> </li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-group" role="group" aria-labelledby="sl-sidebar-group-lydf0wwn-label"> <div class="sidebar-group-label" id="sl-sidebar-group-lydf0wwn-label">Getting started</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/docs/installation"> <span class="sidebar-menu-button-label">Installation</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/docs/project-structure"> <span class="sidebar-menu-button-label">Project structure</span> </a> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-versions" aria-controls="sidebar-versions" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Installation</h1> </main></div>Where it opens, in each state of the sidebar:
| State | The menu |
|---|---|
| Expanded, on a desktop | On the side its content asks for: side="right" puts it beside the sidebar, its top lined up with the trigger, as shadcn’s team switcher and user menu. A menu from a menu button is at least as wide as the button, and 14 rem. |
| Collapsed to icons | Beside the strip, the same way. The button’s tooltip and its menu are never shown together: the tooltip hides when the menu opens and does not show while it is open. A “More” action is not in the strip, like every action. |
| The phone panel | Below its trigger, lined up with its end, whatever side says (there is no room beside a panel as wide as the screen); above it when there is no room below. The menu is drawn above the panel and the panel’s inert leaves it alone. Escape closes the menu first, with the focus back on its trigger, and the panel on the next Escape. A click elsewhere in the panel closes only the menu. |
| The header layout’s row | Below its trigger, lined up with its end, as in the panel. The row’s sideways scrolling does not clip it. A menu button that opens a menu keeps its icon-end (a chevron) in the row, where other icons are left out. |
The trigger looks active while its menu is open, and a show-on-hover action stays shown.
Collapsible groups
Section titled “Collapsible groups”A menu item with collapsible is a group of links that opens and closes, as shadcn’s sidebar-07 has: its menu button
is what the user clicks, and <sl:sidebar-menu-sub> holds the links, indented along a line below it. It is the
browser’s details element (the button becomes its summary, with a chevron that turns when it opens), so it needs
no JavaScript, and the keyboard opens and closes it with Enter and Space.
<sl:sidebar-menu-item collapsible th:open="${#slNav.current('/settings')}"> <sl:sidebar-menu-button tooltip="Settings"> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/settings}" th:active="${#slNav.current('/settings', true)}"> General </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/settings/billing}" th:active="${#slNav.current('/settings/billing')}"> Billing </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub></sl:sidebar-menu-item>openrenders the group open. Open the one that holds the current page, so its link is in view:#slNav.current('/settings')is true on every page below/settings. When the pages share no path, combine them:th:open="${#slNav.current('/people') or #slNav.current('/teams')}".<sl:sidebar-menu-sub-button>is a link (oras="button") like a menu button:activemarks the current page,sizeismd(the default) orsm,disabledworks as on a menu button, and an icon goes inicon-start.- The menu button of a collapsible item takes no
href: it opens the group. Link the group’s first page as a sub-button. - A collapsible item takes no badge or action: the browser hides everything in a closed
detailsbut itssummary. Put a count on a sub-button instead.
Thymeleaf source
<sl:sidebar-provider> <sl:sidebar id="sidebar-sub"> <sl:sidebar-content> <sl:sidebar-group id="sub-platform"> <sl:sidebar-group-label>Platform</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item collapsible th:open="${#slNav.current('/projects')}"> <sl:sidebar-menu-button> <sl:slot name="icon-start"><sl:icon name="folder"/></sl:slot> Projects </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/projects/design">Design Engineering</sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/projects/sales">Sales & Marketing</sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub> </sl:sidebar-menu-item> <sl:sidebar-menu-item collapsible th:open="${#slNav.current('/settings')}"> <sl:sidebar-menu-button> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/settings" th:active="${#slNav.current('/settings', true)}"> General </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/settings/billing" th:active="${#slNav.current('/settings/billing')}"> Billing </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/settings/limits" size="sm"> Limits (small) </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-sub"/> </sl:site-header> <h1>Billing</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar-sub" popover aria-label="Main"> <div class="sidebar-content"> <div class="sidebar-group" id="sub-platform" role="group" aria-labelledby="sub-platform-label"> <div class="sidebar-group-label" id="sub-platform-label">Platform</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <details class="sidebar-menu-collapsible"> <summary class="sidebar-menu-button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path> </svg> <span class="sidebar-menu-button-label">Projects</span> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-menu-button-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <ul class="sidebar-menu-sub"> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/projects/design"> <span class="sidebar-menu-sub-button-label">Design Engineering</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/projects/sales"> <span class="sidebar-menu-sub-button-label">Sales & Marketing</span> </a> </li> </ul> </details> </li> <li class="sidebar-menu-item"> <details class="sidebar-menu-collapsible" open> <summary class="sidebar-menu-button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span class="sidebar-menu-button-label">Settings</span> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-menu-button-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> </summary> <ul class="sidebar-menu-sub"> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/settings"> <span class="sidebar-menu-sub-button-label">General</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" aria-current="page" href="/settings/billing"> <span class="sidebar-menu-sub-button-label">Billing</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" data-size="sm" href="/settings/limits"> <span class="sidebar-menu-sub-button-label">Limits (small)</span> </a> </li> </ul> </details> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-sub" aria-controls="sidebar-sub" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Billing</h1> </main></div>A section that is a page too
Section titled “A section that is a page too”When the section has a page of its own, keep its menu button a link and give the sub-menu collapsible: a chevron
at the end of the button opens and closes it, as in shadcn’s sidebar-08. The chevron is the summary of a details
element beside the link (a link cannot sit inside a summary), drawn as a menu action. It holds only an
icon, so it needs an aria-label that names what it opens; the other attributes go to the list. open works as on a
collapsible item.
<sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/playground}" th:active="${#slNav.current('/playground', true)}"> <sl:slot name="icon-start"><sl:icon name="square-terminal"/></sl:slot> Playground </sl:sidebar-menu-button> <sl:sidebar-menu-sub collapsible th:open="${#slNav.current('/playground')}" aria-label="Playground's pages"> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/playground/history}" th:active="${#slNav.current('/playground/history')}">History</sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub></sl:sidebar-menu-item>The keyboard reaches the link, then the chevron. Collapsed to icons, the chevron and the sub-menu are hidden, and the section’s icon shows when the current page is one of its pages. The Inset with secondary navigation layout has four such sections.
Collapsible sections
Section titled “Collapsible sections”A group with collapsible opens and closes as a whole, as in shadcn’s sidebar-02: its
<sl:sidebar-group-label> becomes the summary of a details element, with a chevron at the end, so it must be the
group’s first part. The label still names the group. open renders it open.
<sl:sidebar-group id="build" collapsible th:open="${#slNav.current('/build')}"> <sl:sidebar-group-label>Build Your Application</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu>...</sl:sidebar-menu> </sl:sidebar-group-content></sl:sidebar-group>Collapsed to icons, and in the header row, the label is out of view, so every collapsible group shows its links whether it is open or not. The Collapsible sections layout has one per section.
One element for a desktop and a phone
Section titled “One element for a desktop and a phone”The server does not know how wide the screen is, so the sidebar is one element for both:
- From 768 px (shadcn’s
md) it is a column beside the page, as tall as the screen and sticky while the page scrolls. The trigger, or Ctrl+B (⌘B on a Mac), collapses it out of view and expands it again. A collapsed sidebar’s links leave the tab order. - Below 768 px it is hidden, and the trigger opens it as a panel over the page, with the page dimmed behind it.
The focus moves to the current page’s link (
aria-current="page") or the first link. Tab stays in the panel, and the rest of the page is inert, so a screen reader finds only the navigation. Escape, a click outside, Ctrl/⌘B, following one of its links and widening the window past 768 px close it, and the focus goes back to the trigger.
The sidebar is a popover (<nav popover>): the
browser shows the panel in the top layer and closes it on Escape or a click outside, without script. On a desktop the
CSS shows it in the page instead, where it is a plain navigation landmark.
Ctrl/⌘B does nothing while the focus is in a rich text editor (contenteditable), where it means bold.
<sl:sidebar-provider> has to start at the top of the page. On a desktop the sidebar is sticky at the top of the
screen and as tall as the screen, so below a header of the page’s own (shadcn’s sidebar-16) it would slide under that
header and run past the bottom of the screen. Put the page’s header inside <sl:sidebar-inset>, or the navigation in
the header with placement="header".
The state is remembered
Section titled “The state is remembered”When the user collapses or expands the sidebar, the browser stores the choice in a cookie, sl-sidebar-state
(expanded or collapsed, for a year, the whole site). <sl:sidebar-provider> reads it on the server, so the next
page renders in the same state from the first paint: nothing jumps, with or without htmx.
default-state="collapsed"starts collapsed until the user chooses.staterenders a state whatever the cookie says, for an application that keeps the choice itself, such as in the user’s settings:<sl:sidebar-provider th:state="${settings.sidebar}">. Listen tosl-sidebar-toggle(below) to save it.
Thymeleaf source
<sl:sidebar-provider state="collapsed"> <sl:sidebar id="sidebar-collapsed"> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" active>Home</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings">Settings</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-collapsed"/> </sl:site-header> <h1>Home</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="collapsed"> <nav class="sidebar" id="sidebar-collapsed" popover aria-label="Main"> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <span class="sidebar-menu-button-label">Home</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/settings"> <span class="sidebar-menu-button-label">Settings</span> </a> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-collapsed" aria-controls="sidebar-collapsed" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Home</h1> </main></div>The phone panel ignores the state: it always opens with everything in it.
Variants
Section titled “Variants”variant changes how the sidebar looks on a desktop, as shadcn/ui’s:
sidebar(the default) is a column along the edge of the screen, with a border on the page’s side.floatingis a panel with a margin all round, rounded (in the vega skin) and with a shadow. It takes as much room as the plain sidebar, so a page lays out the same with either.insetgives the sidebar no edge: its colour lies around the page, and<sl:sidebar-inset>becomes a card on it, with a margin, rounded corners (vega) and a shadow. The example at the top of this page, and the Collapses to icons layout, use it.
Thymeleaf source
<sl:sidebar-provider> <sl:sidebar id="sidebar-floating" variant="floating"> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" active>Home</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/inbox">Inbox</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings">Settings</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-floating"/> </sl:site-header> <h1>Floating</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar-floating" popover aria-label="Main" data-variant="floating"> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <span class="sidebar-menu-button-label">Home</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/inbox"> <span class="sidebar-menu-button-label">Inbox</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/settings"> <span class="sidebar-menu-button-label">Settings</span> </a> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-floating" aria-controls="sidebar-floating" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Floating</h1> </main></div>Below 768 px the variant makes no difference: the panel and the page are the same for all three.
Collapsed to icons
Section titled “Collapsed to icons”collapsible="icon" collapses the sidebar to a strip of its menu buttons’ icons instead of moving it out of view, as
shadcn’s sidebar-07 does. It is as wide as --sidebar-width-icon (3 rem in both skins); floating and inset add their
margin around it.
<sl:sidebar variant="inset" collapsible="icon"> ... <sl:sidebar-menu-button th:href="@{/inbox}" th:active="${#slNav.current('/inbox')}" tooltip="Inbox"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button>- Every menu button becomes a square with its icon in the middle. The label is visually hidden, not removed: it stays the link’s name, so a screen reader still says “Inbox, link”. A large button (the application’s name in the header) loses its padding, so a logo as large as the square fills it.
- Badges, actions, sub-menus and a collapsible item’s chevron are hidden. A badge still describes its button. Group labels move out of view but still name their groups.
tooltipon a menu button shows its label beside it, on hover and on keyboard focus, while the sidebar is collapsed to icons; never while it is expanded or on a phone. It repeats the button’s name, so it is hidden from screen readers and describes nothing (as a tooltip withmode="label"). Give every menu button one: without it, the icon alone has to say where the link goes.- A menu button that opens a menu still does, beside the strip; its tooltip never shows while the menu is open.
- A click (or Enter) on a collapsible group’s icon expands the sidebar and opens the group, as the sub-menu has no room in the strip. A group that holds the current page shows it on its icon.
icon-hiddenon a group leaves it out of the strip, as shadcn’s sidebar-07 does with its projects: links without icons of their own would be a row of identical squares. Expanded, and in the phone panel, the group shows as usual.- The server renders the strip from the cookie, so the first paint is right with and without JavaScript. On a phone the panel ignores it and shows everything.
Thymeleaf source
<sl:sidebar-provider state="collapsed"> <sl:sidebar id="sidebar-icon" collapsible="icon"> <sl:sidebar-header> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" size="lg" tooltip="Acme Inc."> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Acme Inc.</strong> <small>Enterprise</small> </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group id="icon-platform"> <sl:sidebar-group-label>Platform</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" th:active="${#slNav.current('/')}" tooltip="Home"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Home </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item id="icon-inbox"> <sl:sidebar-menu-button href="/inbox" th:active="${#slNav.current('/inbox')}" tooltip="Inbox"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button> <sl:sidebar-menu-badge label="12 unread">12</sl:sidebar-menu-badge> </sl:sidebar-menu-item> <sl:sidebar-menu-item collapsible th:open="${#slNav.current('/settings')}"> <sl:sidebar-menu-button tooltip="Settings"> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/settings" th:active="${#slNav.current('/settings', true)}"> General </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button href="/settings/billing" th:active="${#slNav.current('/settings/billing')}"> Billing </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-icon"/> </sl:site-header> <h1>Billing</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="collapsed"> <nav class="sidebar" id="sidebar-icon" popover aria-label="Main" data-collapsible="icon"> <div class="sidebar-header"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="lg" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Acme Inc.</strong> <small>Enterprise</small> </span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Acme Inc. <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-group" id="icon-platform" role="group" aria-labelledby="icon-platform-label"> <div class="sidebar-group-label" id="icon-platform-label">Platform</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Home</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Home <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> </li> <li class="sidebar-menu-item" id="icon-inbox"> <a class="sidebar-menu-button" aria-describedby="icon-inbox-badge" href="/inbox"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> <span class="sidebar-menu-button-label">Inbox</span> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Inbox <span class="tooltip-arrow" aria-hidden="true"></span> </span> </a> <div class="sidebar-menu-badge" id="icon-inbox-badge"> <span aria-hidden="true">12</span> <span class="sl-sr-only">12 unread</span> </div> </li> <li class="sidebar-menu-item"> <details class="sidebar-menu-collapsible" open> <summary class="sidebar-menu-button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span class="sidebar-menu-button-label">Settings</span> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-menu-button-chevron" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m9 18 6-6-6-6"></path> </svg> <span class="tooltip-content sidebar-menu-tooltip" role="tooltip" popover="manual" data-side="right" aria-hidden="true" x-data="slSidebarMenuTooltip"> Settings <span class="tooltip-arrow" aria-hidden="true"></span> </span> </summary> <ul class="sidebar-menu-sub"> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/settings"> <span class="sidebar-menu-sub-button-label">General</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" aria-current="page" href="/settings/billing"> <span class="sidebar-menu-sub-button-label">Billing</span> </a> </li> </ul> </details> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-icon" aria-controls="sidebar-icon" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Billing</h1> </main></div>collapsible="offcanvas" (the default) moves the collapsed sidebar out of view. collapsible="none" never collapses
it: the trigger is hidden on a desktop and Ctrl/⌘B does nothing there, whatever the cookie says. On a phone it is the
panel, as with the other two.
side="right" puts the sidebar at the end of the line: the right, or the left on a right-to-left page (dir="rtl").
The default, left, is the start of the line: the left, or the right on a right-to-left page. The sheet’s sides work
the same way. The panel slides in from the same edge, and
the trigger’s icon shows the panel on that side. The On the end layout puts a table of
contents there.
Thymeleaf source
<sl:sidebar-provider> <sl:sidebar id="sidebar-end" side="right"> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" active>Home</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/inbox">Inbox</sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings">Settings</sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:sidebar-inset> <sl:site-header> <sl:sidebar-trigger for="sidebar-end"/> </sl:site-header> <h1>Home</h1> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <nav class="sidebar" id="sidebar-end" popover aria-label="Main" data-side="right"> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <span class="sidebar-menu-button-label">Home</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/inbox"> <span class="sidebar-menu-button-label">Inbox</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/settings"> <span class="sidebar-menu-button-label">Settings</span> </a> </li> </ul> </div> </div> </div> </nav> <main class="sidebar-inset" id="main" tabindex="-1"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar-end" aria-controls="sidebar-end" aria-label="Toggle sidebar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon sidebar-trigger-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="18" height="18" x="3" y="3" rx="2"></rect> <path d="M9 3v18"></path> </svg> </button> </header> <h1>Home</h1> </main></div>In the header
Section titled “In the header”placement="header" puts the same <sl:sidebar> inside a <sl:site-header> instead of beside the
page: from 768 px it is a row of links in the header, and narrower it is the panel, as in the sidebar layout. Nothing
is rendered twice: it is one nav with one set of ids at every width. Inside <sl:sidebar-provider>, the header goes
first and <sl:sidebar-inset> below it:
<sl:sidebar-provider> <sl:site-header> <sl:sidebar-trigger aria-label="Menu"><sl:icon name="menu"/></sl:sidebar-trigger> <sl:button as="a" th:href="@{/}" variant="ghost">Acme Inc.</sl:button> <sl:sidebar placement="header" variant="inset"> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu>...</sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> </sl:sidebar> <sl:slot name="end"><sl:theme-toggle/></sl:slot> </sl:site-header> <sl:sidebar-inset>...</sl:sidebar-inset></sl:sidebar-provider>Thymeleaf source
<sl:skip-link/><sl:sidebar-provider> <sl:site-header> <sl:sidebar-trigger aria-label="Menu"><sl:icon name="menu"/></sl:sidebar-trigger> <sl:button as="a" href="/" variant="ghost"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> Acme Inc. </sl:button> <sl:sidebar placement="header" variant="inset"> <sl:sidebar-header panel-only> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" size="lg"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Acme Inc.</strong> <small>Enterprise</small> </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" th:active="${#slNav.current('/')}"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Home </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item id="header-inbox"> <sl:sidebar-menu-button href="/inbox" th:active="${#slNav.current('/inbox')}"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button> <sl:sidebar-menu-badge label="12 unread">12</sl:sidebar-menu-badge> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/calendar" th:active="${#slNav.current('/calendar')}"> <sl:slot name="icon-start"><sl:icon name="calendar"/></sl:slot> Calendar </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/documents" th:active="${#slNav.current('/documents')}"> <sl:slot name="icon-start"><sl:icon name="file-text"/></sl:slot> Documents </sl:sidebar-menu-button> <sl:dropdown-menu id="header-documents-more"> <sl:dropdown-menu-trigger as="sidebar-menu-action" aria-label="More for Documents"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" href="/documents/new">New document</sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" href="/documents/shared">Shared with me</sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="favorites" panel-only> <sl:sidebar-group-label>Favorites</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/marketing"> <sl:slot name="icon-start"><sl:icon name="globe"/></sl:slot> Marketing site </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/android"> <sl:slot name="icon-start"><sl:icon name="smartphone"/></sl:slot> Android app </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> <sl:sidebar-footer panel-only> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings" size="sm" th:active="${#slNav.current('/settings')}"> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/help" size="sm"> <sl:slot name="icon-start"><sl:icon name="life-buoy"/></sl:slot> Help </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-footer> </sl:sidebar> <sl:slot name="end"> <sl:button variant="ghost" size="icon-sm" aria-label="Search"><sl:icon name="search"/></sl:button> <sl:theme-toggle/> <sl:user-menu placement="header" id="header-user-menu"> <sl:dropdown-menu-item as="a" href="/account"><sl:icon name="badge-check"/>Account</sl:dropdown-menu-item> </sl:user-menu> </sl:slot> </sl:site-header> <sl:sidebar-inset> <h1>Home</h1> <p>The page's content.</p> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<a class="skip-link" href="#main">Skip to main content</a><div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar" aria-controls="sidebar" aria-label="Menu"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M4 5h16"></path> <path d="M4 12h16"></path> <path d="M4 19h16"></path> </svg> </button> <a class="button" data-variant="ghost" href="/"> <span class="button-icon" data-icon="inline-start"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> </span> Acme Inc. </a> <nav class="sidebar" id="sidebar" popover aria-label="Main" data-placement="header" data-variant="inset"> <div class="sidebar-header" data-panel-only="true"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="lg" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Acme Inc.</strong> <small>Enterprise</small> </span> </a> </li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Home</span> </a> </li> <li class="sidebar-menu-item" id="header-inbox"> <a class="sidebar-menu-button" aria-describedby="header-inbox-badge" href="/inbox"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> <span class="sidebar-menu-button-label">Inbox</span> </a> <div class="sidebar-menu-badge" id="header-inbox-badge"> <span aria-hidden="true">12</span> <span class="sl-sr-only">12 unread</span> </div> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/calendar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M8 2v3"></path> <path d="M16 2v3"></path> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <span class="sidebar-menu-button-label">Calendar</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/documents"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path> <path d="M14 2v5a1 1 0 0 0 1 1h5"></path> <path d="M10 9H8"></path> <path d="M16 13H8"></path> <path d="M16 17H8"></path> </svg> <span class="sidebar-menu-button-label">Documents</span> </a> <button class="sidebar-menu-action dropdown-menu-trigger" type="button" id="header-documents-more-trigger" popovertarget="header-documents-more" aria-haspopup="menu" aria-label="More for Documents"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> </button> <div class="dropdown-menu-content" id="header-documents-more" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="header-documents-more-trigger" data-side="right"> <a class="dropdown-menu-item" role="menuitem" href="/documents/new">New document</a> <a class="dropdown-menu-item" role="menuitem" href="/documents/shared">Shared with me</a> </div> </li> </ul> </div> </div> <div class="sidebar-group" id="favorites" role="group" aria-labelledby="favorites-label" data-panel-only="true"> <div class="sidebar-group-label" id="favorites-label">Favorites</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/marketing"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path> <path d="M2 12h20"></path> </svg> <span class="sidebar-menu-button-label">Marketing site</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/android"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect> <path d="M12 18h.01"></path> </svg> <span class="sidebar-menu-button-label">Android app</span> </a> </li> </ul> </div> </div> </div> <div class="sidebar-footer" data-panel-only="true"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/settings"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span class="sidebar-menu-button-label">Settings</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/help"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.93 4.93 4.24 4.24"></path> <path d="m14.83 9.17 4.24-4.24"></path> <path d="m14.83 14.83 4.24 4.24"></path> <path d="m9.17 14.83-4.24 4.24"></path> <circle cx="12" cy="12" r="4"></circle> </svg> <span class="sidebar-menu-button-label">Help</span> </a> </li> </ul> </div> </nav> <div class="site-header-end"> <button class="button" type="button" data-variant="ghost" data-size="icon-sm" aria-label="Search"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m21 21-4.34-4.34"></path> <circle cx="11" cy="11" r="8"></circle> </svg> </button> <div class="theme-toggle" x-data="slThemeToggle"> <button class="button dropdown-menu-trigger theme-toggle-trigger" type="button" data-variant="outline" data-size="icon" id="theme-toggle-trigger" popovertarget="theme-toggle" aria-haspopup="menu" aria-label="Theme"> <svg xmlns="http://www.w3.org/2000/svg" class="icon theme-toggle-light" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="4"></circle> <path d="M12 2v2"></path> <path d="M12 20v2"></path> <path d="m4.93 4.93 1.41 1.41"></path> <path d="m17.66 17.66 1.41 1.41"></path> <path d="M2 12h2"></path> <path d="M20 12h2"></path> <path d="m6.34 17.66-1.41 1.41"></path> <path d="m19.07 4.93-1.41 1.41"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon theme-toggle-dark" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path> </svg> </button> <div class="dropdown-menu-content" id="theme-toggle" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="theme-toggle-trigger" data-align="end"> <div class="dropdown-menu-radio-group" role="group"> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="light"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="4"></circle> <path d="M12 2v2"></path> <path d="M12 20v2"></path> <path d="m4.93 4.93 1.41 1.41"></path> <path d="m17.66 17.66 1.41 1.41"></path> <path d="M2 12h2"></path> <path d="M20 12h2"></path> <path d="m6.34 17.66-1.41 1.41"></path> <path d="m19.07 4.93-1.41 1.41"></path> </svg> Light <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="dark"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path> </svg> Dark <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="system"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="20" height="14" x="2" y="3" rx="2"></rect> <line x1="8" x2="16" y1="21" y2="21"></line> <line x1="12" x2="12" y1="17" y2="21"></line> </svg> System <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> </div> </div> </div> <button class="button dropdown-menu-trigger user-menu-trigger" type="button" data-variant="ghost" data-size="icon" id="header-user-menu-trigger" popovertarget="header-user-menu" aria-haspopup="menu" aria-label="Account: shadcn"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,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"> <span class="avatar-fallback">S</span> </span> </button> <div class="dropdown-menu-content user-menu-content" id="header-user-menu" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="header-user-menu-trigger" data-align="end"> <div class="dropdown-menu-label user-menu-label"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,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"> <span class="avatar-fallback">S</span> </span> <span class="user-menu-text"> <span class="user-menu-name">shadcn</span> <span class="user-menu-detail">m@example.com</span> </span> </div> <div class="dropdown-menu-separator" role="separator"></div> <a class="dropdown-menu-item" role="menuitem" href="/account"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path> <path d="m16 9-5.5 5.5L8 12"></path> </svg> Account </a> <div class="dropdown-menu-separator" role="separator"></div> <button type="submit" class="dropdown-menu-item user-menu-sign-out" role="menuitem" form="header-user-menu-sign-out"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m16 17 5-5-5-5"></path> <path d="M21 12H9"></path> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> </svg> Sign out </button> </div> <form id="header-user-menu-sign-out" class="user-menu-sign-out-form" method="post" action="/logout" hx-boost="false" hidden></form> </div> </header> <main class="sidebar-inset" id="main" tabindex="-1"> <h1>Home</h1> <p>The page's content.</p> </main></div>In the row the menu buttons show their labels only (no icons), the current page marked as in the sidebar. Groups run one after the other; a group’s label is visually hidden but still names it for a screen reader. Badges and actions stay beside their links. Collapsible items, group actions and separators are left out of the row: a sub-menu that drops down from a header is a different component (a navigation menu), which Shadleaf does not have yet. Mark such an item panel-only so it is still in the panel.
When the links do not fit, the row scrolls sideways (with a thin scrollbar where the system shows them), and a link the keyboard reaches scrolls into view; the page itself never gets wider. Keep the row short with panel-only parts.
The row never collapses, so collapsible, the cookie’s state and Ctrl/⌘B do nothing on a desktop, and the trigger
is hidden there. Give the trigger a menu icon and a name of its own, as above: it opens the panel on a phone only.
side still picks the panel’s edge. Of the variants only inset counts: the page becomes a card below the header, on
the sidebar’s colour, as in the sidebar layout.
On a phone the menu button opens the same nav as the panel, with everything in it: icons, group labels, collapsible
groups, and the panel-only parts.
Thymeleaf source
<sl:skip-link/><sl:sidebar-provider> <sl:site-header> <sl:sidebar-trigger aria-label="Menu"><sl:icon name="menu"/></sl:sidebar-trigger> <sl:button as="a" href="/" variant="ghost"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> Acme Inc. </sl:button> <sl:sidebar placement="header" variant="inset"> <sl:sidebar-header panel-only> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" size="lg"> <sl:slot name="icon-start"><sl:icon name="gallery-vertical-end"/></sl:slot> <strong>Acme Inc.</strong> <small>Enterprise</small> </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-header> <sl:sidebar-content> <sl:sidebar-group> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/" th:active="${#slNav.current('/')}"> <sl:slot name="icon-start"><sl:icon name="house"/></sl:slot> Home </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item id="header-inbox"> <sl:sidebar-menu-button href="/inbox" th:active="${#slNav.current('/inbox')}"> <sl:slot name="icon-start"><sl:icon name="inbox"/></sl:slot> Inbox </sl:sidebar-menu-button> <sl:sidebar-menu-badge label="12 unread">12</sl:sidebar-menu-badge> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/calendar" th:active="${#slNav.current('/calendar')}"> <sl:slot name="icon-start"><sl:icon name="calendar"/></sl:slot> Calendar </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/documents" th:active="${#slNav.current('/documents')}"> <sl:slot name="icon-start"><sl:icon name="file-text"/></sl:slot> Documents </sl:sidebar-menu-button> <sl:dropdown-menu id="header-documents-more"> <sl:dropdown-menu-trigger as="sidebar-menu-action" aria-label="More for Documents"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" href="/documents/new">New document</sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" href="/documents/shared">Shared with me</sl:dropdown-menu-item> </sl:dropdown-menu-content> </sl:dropdown-menu> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> <sl:sidebar-group id="favorites" panel-only> <sl:sidebar-group-label>Favorites</sl:sidebar-group-label> <sl:sidebar-group-content> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/marketing"> <sl:slot name="icon-start"><sl:icon name="globe"/></sl:slot> Marketing site </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/projects/android"> <sl:slot name="icon-start"><sl:icon name="smartphone"/></sl:slot> Android app </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group-content> </sl:sidebar-group> </sl:sidebar-content> <sl:sidebar-footer panel-only> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/settings" size="sm" th:active="${#slNav.current('/settings')}"> <sl:slot name="icon-start"><sl:icon name="settings"/></sl:slot> Settings </sl:sidebar-menu-button> </sl:sidebar-menu-item> <sl:sidebar-menu-item> <sl:sidebar-menu-button href="/help" size="sm"> <sl:slot name="icon-start"><sl:icon name="life-buoy"/></sl:slot> Help </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-footer> </sl:sidebar> <sl:slot name="end"> <sl:button variant="ghost" size="icon-sm" aria-label="Search"><sl:icon name="search"/></sl:button> <sl:theme-toggle/> <sl:user-menu placement="header" id="header-user-menu"> <sl:dropdown-menu-item as="a" href="/account"><sl:icon name="badge-check"/>Account</sl:dropdown-menu-item> </sl:user-menu> </sl:slot> </sl:site-header> <sl:sidebar-inset> <h1>Home</h1> <p>The page's content.</p> </sl:sidebar-inset></sl:sidebar-provider>Rendered HTML
<a class="skip-link" href="#main">Skip to main content</a><div class="sidebar-provider" x-data="slSidebar" data-state="expanded"> <header class="site-header"> <button class="button sidebar-trigger" type="button" data-variant="ghost" data-size="icon-sm" popovertarget="sidebar" aria-controls="sidebar" aria-label="Menu"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M4 5h16"></path> <path d="M4 12h16"></path> <path d="M4 19h16"></path> </svg> </button> <a class="button" data-variant="ghost" href="/"> <span class="button-icon" data-icon="inline-start"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> </span> Acme Inc. </a> <nav class="sidebar" id="sidebar" popover aria-label="Main" data-placement="header" data-variant="inset"> <div class="sidebar-header" data-panel-only="true"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="lg" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M7 2h10"></path> <path d="M5 6h14"></path> <rect width="18" height="12" x="3" y="10" rx="2"></rect> </svg> <span class="sidebar-menu-button-label"> <strong>Acme Inc.</strong> <small>Enterprise</small> </span> </a> </li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-group"> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" aria-current="page" href="/"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> <span class="sidebar-menu-button-label">Home</span> </a> </li> <li class="sidebar-menu-item" id="header-inbox"> <a class="sidebar-menu-button" aria-describedby="header-inbox-badge" href="/inbox"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> <span class="sidebar-menu-button-label">Inbox</span> </a> <div class="sidebar-menu-badge" id="header-inbox-badge"> <span aria-hidden="true">12</span> <span class="sl-sr-only">12 unread</span> </div> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/calendar"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M8 2v3"></path> <path d="M16 2v3"></path> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <span class="sidebar-menu-button-label">Calendar</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/documents"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path> <path d="M14 2v5a1 1 0 0 0 1 1h5"></path> <path d="M10 9H8"></path> <path d="M16 13H8"></path> <path d="M16 17H8"></path> </svg> <span class="sidebar-menu-button-label">Documents</span> </a> <button class="sidebar-menu-action dropdown-menu-trigger" type="button" id="header-documents-more-trigger" popovertarget="header-documents-more" aria-haspopup="menu" aria-label="More for Documents"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> <circle cx="5" cy="12" r="1"></circle> </svg> </button> <div class="dropdown-menu-content" id="header-documents-more" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="header-documents-more-trigger" data-side="right"> <a class="dropdown-menu-item" role="menuitem" href="/documents/new">New document</a> <a class="dropdown-menu-item" role="menuitem" href="/documents/shared">Shared with me</a> </div> </li> </ul> </div> </div> <div class="sidebar-group" id="favorites" role="group" aria-labelledby="favorites-label" data-panel-only="true"> <div class="sidebar-group-label" id="favorites-label">Favorites</div> <div class="sidebar-group-content"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/marketing"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path> <path d="M2 12h20"></path> </svg> <span class="sidebar-menu-button-label">Marketing site</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" href="/projects/android"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect> <path d="M12 18h.01"></path> </svg> <span class="sidebar-menu-button-label">Android app</span> </a> </li> </ul> </div> </div> </div> <div class="sidebar-footer" data-panel-only="true"> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/settings"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span class="sidebar-menu-button-label">Settings</span> </a> </li> <li class="sidebar-menu-item"> <a class="sidebar-menu-button" data-size="sm" href="/help"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.93 4.93 4.24 4.24"></path> <path d="m14.83 9.17 4.24-4.24"></path> <path d="m14.83 14.83 4.24 4.24"></path> <path d="m9.17 14.83-4.24 4.24"></path> <circle cx="12" cy="12" r="4"></circle> </svg> <span class="sidebar-menu-button-label">Help</span> </a> </li> </ul> </div> </nav> <div class="site-header-end"> <button class="button" type="button" data-variant="ghost" data-size="icon-sm" aria-label="Search"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m21 21-4.34-4.34"></path> <circle cx="11" cy="11" r="8"></circle> </svg> </button> <div class="theme-toggle" x-data="slThemeToggle"> <button class="button dropdown-menu-trigger theme-toggle-trigger" type="button" data-variant="outline" data-size="icon" id="theme-toggle-trigger" popovertarget="theme-toggle" aria-haspopup="menu" aria-label="Theme"> <svg xmlns="http://www.w3.org/2000/svg" class="icon theme-toggle-light" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="4"></circle> <path d="M12 2v2"></path> <path d="M12 20v2"></path> <path d="m4.93 4.93 1.41 1.41"></path> <path d="m17.66 17.66 1.41 1.41"></path> <path d="M2 12h2"></path> <path d="M20 12h2"></path> <path d="m6.34 17.66-1.41 1.41"></path> <path d="m19.07 4.93-1.41 1.41"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon theme-toggle-dark" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path> </svg> </button> <div class="dropdown-menu-content" id="theme-toggle" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="theme-toggle-trigger" data-align="end"> <div class="dropdown-menu-radio-group" role="group"> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="light"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <circle cx="12" cy="12" r="4"></circle> <path d="M12 2v2"></path> <path d="M12 20v2"></path> <path d="m4.93 4.93 1.41 1.41"></path> <path d="m17.66 17.66 1.41 1.41"></path> <path d="M2 12h2"></path> <path d="M20 12h2"></path> <path d="m6.34 17.66-1.41 1.41"></path> <path d="m19.07 4.93-1.41 1.41"></path> </svg> Light <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="dark"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path> </svg> Dark <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> <button type="button" class="dropdown-menu-radio-item" role="menuitemradio" aria-checked="false" data-theme-choice="system"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <rect width="20" height="14" x="2" y="3" rx="2"></rect> <line x1="8" x2="16" y1="21" y2="21"></line> <line x1="12" x2="12" y1="17" y2="21"></line> </svg> System <span class="dropdown-menu-item-indicator"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M20 6 9 17l-5-5"></path> </svg> </span> </button> </div> </div> </div> <button class="button dropdown-menu-trigger user-menu-trigger" type="button" data-variant="ghost" data-size="icon" id="header-user-menu-trigger" popovertarget="header-user-menu" aria-haspopup="menu" aria-label="Account: shadcn"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCACAAIADASIAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAABgcEBQIDCAEA/8QAPxAAAgEDAgMGBQEFBwIHAAAAAQIDBAURAAYSITEHE0FRYXEUIjKBkaEII0JSsRUWYnLB0eEkM0NTc5LC0vD/xAAbAQACAwEBAQAAAAAAAAAAAAAEBQIDBgEHAP/EADMRAAEDAgQDBgUEAwEAAAAAAAECAxEABAUSITFBUWEGE3GBobEiMpHB0RTh8PEHI0Ki/9oADAMBAAIRAxEAPwD15Db6USOvEXbHD/zrVRXaGsqxTfDSrJz58iBjxzokNhSSPEVaWQ+eGGozbSic/NKp9QMa9nTd25BzHWnOP/49tMSeXdMgtvKHzAneIkifxUUxqwII4h4g89axR0oGPh4wM/y6lPs6IIRHMwB6gOeeodHbUt8kiqXy3I5bI5a6l1tfyKry/tX2PxfA7I3r14pYSQBAPHmZMD7wONEm2ty1thpPg6SClan4y/AyYOT15jRZadxx36SRP7vyzSwx8TmOVeQ9zjS2chVLFgoHMknAA1ArahnpiA708Un8bEhpF/wp1YepwPfSDGGcPZQXbghJPHX2B1oLsZb4jiaVqC84A0SefU8J8acUK7Vqoy9QtLSyBirRy1SBgfs2p9JZdv1EfHS09POn80cnGP0Oud56yz0ZDT0bTDnwh5Tknw5LgAap5N6mF2FBaqemUH5XjdlbWAfxa0zHuQojmQB6T969Mb7KXCkArWkK5amPOK6rprTQ0dQs9LTinmTPC6dR+dR13FcvjTQxU9PcJWYqig8BYDqfLprmW1dpG6YmKf2lO0XImJnLKR7HI0T2XfUNXUYnVu9zlig4XU+i/wAQ9jn01Y2wxiI+CCrkdD+/kZpZdWl7hJlc5OY1Hny8SI605rxuuG11EEN226IXnbhQLUr5gEnwA5+OiWhFiqwvw/wjs3RBIpb8Z0nH23V3mJLjb42ljmXIlTDLJ65z11e7F2dFRXZaq+0dUWjdGpjEMKrg9Wxz8vTz0DdYSwlvMnQjgBPuaJtsYdKspVoeZj2FMiqslorlaOotq4Q4ViCp91IPTQVfrJtqmqnpo7hOjocSRsOMKfLpz0yWBKkZIJHXQ7XWapY5XDkeI8ffOkbV46yISTHQ/wB1scPvFtq+Jwgcp/M0tdw7fsRt8kRC1McoKOrxgKykcxka5O31t2XbO5aq2OS0KnjppD/HEfpPv4H1B13BXbYq6pGTuWHP8HSf/aO7OK0bN/t4xxd9bmyCp+Z4j9S48cY4vsfPWkwjFhIbUrU8/wCRRtw+LpMOKBUNufh96Vdk3luiicQ0t4mEZJLK6K49+Y0d2LtIuUMaJdaSKsXxljPdyfjHCf00uLfAECqQMjmxHjqyA5a6zfXTR+BZ9/en6CYkmmgu7oLviKhrTRzseUco4SR5A8xnWdZJURUI+KjkDAhRJEwZmJOAAPEk45aVZ0Z7WjahtElymlPHjECsxIUnkXx6DkPvrRWnad1LZC2wSBuNPSh7y2RcILaxmCuBEjnqDVtUN/Z9K89fL8RVj6IQQY4j/Rm82PIeHmRK4XwGV3diZXb+EF2YnoB5nVfeLjLXVSW6g4qqpncJGgyTI7HAGm1sbZdHtqlFbVlKy7cGZKgr8sX+GMeA9ep/TWQvHHb1zvXzJpDbsMtDurRAQnoANfLjQ9tXs2vu4YxUXKVbPSnnwPH3k5+2cKfc59NGNL2K7PRB8TNdqp/FjUiMH7IoGj+2spoIO5GQyA8vEkc9SAxBw2R76H7qNhXVE7Utbj2LbXlUtb6u40Evge8Eq/hhn9dL3d3ZRuayh6yjKXWnUklqYESqPMoef4zro3jHrr7iGNXtuqT8yZHhB+u9DKan5SR6j6GuZdh9o1y2tXgtIZIi3DPCz/LL58Q8GH8w5+eemulrJuOivVggvNrWSoik5FB9UbeIbHl+uQdKntq7MKXctNJd7NFFT3iMFuS8K1IH8LeTeTfnQf8As+bxuVkqJrZJRvUd9J3LQPJ3ZR1DHPPoQVYY9dbC1tziFsojVaRIPMaAhXUSIPEVhcWs2WHJZGXaRw1MSnkJ0I4e7svl9vTzv3SS08ajhBV2J9z66pqK67xFyV7TWS1RRCTBLmQEeJIP/GpadpFuFSgulpkhhY8JmRhLw+64B/GjG0VNqutAldbu5mp5MhXEeM4OCOYB0BdYY9bJ/wBrUA8YkUuFwpp0tlRChwnXxoa2vuve91u8aiz080HEqTNhkSNc8znixxY99Mqpp6eqhaCphjniYEMkiBlI9QdUsMCQcXwxan4uvdHh/TprXPc7hboy0nDWRseTP8pX0ONZ28sFLVmZSABypzZ4olIh0mf551xsI1UDhXGsh01LEbcOQpxrB4G+rhKj20w7uDIr1rPwqHJ8qswGcAnV5vateltK0UBI7pUhGTzJx8x/OfzqlnBCqCPqkRfy4GiI7fvG7pKhrNb2uAidi57xI41fwUuxAz6DJ89QLZSiRxNU3b6kNHLuRH5+1Zfs92z42/3C81KD/oIxDFnniSTOT9lB/wDdpyXesoqKkdq6tp6RCv1SyBc+wPM/bSH2nbO2JKWstFooKbbdNLVM8883CJVYAKQG+Y4HD4Dx66JLd2TpBUpX3+/1tdWk8TtGxUsf/Ucs34xqtDaFGXFQOm9K7QrygJQY4nb+6x39u2uvUlq2nbK2uo7XWVQSpqoW7mRsnOE6Nw8ifAZI1PgoNyWchtr78vlKi9KW4la6A+nz/MPsdVG6bPZbTuHbVbSU8VHTRVohmncs+OJ1+dmJJPLi8ddE0uwqNSojqDhORxEv9dPGXsMtreXhvtPTqKzvaO8uWb1LTKQElO+5mTMQB/ONLOPdXaxYrOl03BsajvdtBw1ZZ5ykmM4BMLZPXyGNXm1O1TZe4WEMV0FvrM4amr17lw3iuT8pI8s59NNGeK1290q7rXK0kJBjNRIAkR6DgQYC++M+uuPu2cWq9drW/LpSoPgqdOLjhPCHljgQFvXLk588aV2btnerUnIUgcR+Dv6V1l+4yjjPMafX+eFdRTcMlKWVgyOOTKcgj0PjpH71stJat/T3EYSOqHfiNV+uZRwk+3C4b3ydDmxqa809shmtN+q7UzRqO7g/7eQBksucEk51Ybmp+0Ktoo7rV0ButJRzZ+Lp4FJJZeAqVUqx6j6Q3PGtlhuGLwx3MtUoJ8Kx3aPEhcIaKEZXN9TplIMf+oMdKtrU1HWTGa9rXw2xFJDUkPGXcHkuT099FfZ/HfqjckUu15LjT7XhmAnSvkBB5ZdVXxPPljpnmdBXZnvS4QwVlPaGpFklHE3exmThKnBxnBBBPNWHiDo+2VuK7rfZJr/uOKGlcAsjU68DsOWMj6Djx8cabYkp1xtxaIKI0Bk+YTG/WaQJumFEd8uHTEyRPh0E8qaFXUxUsXHKTz5BR1J0H3vc0tQHp6eFUjz9ROScasrxd9v1NEK7+37ZHBA/ds8lSqpxH+HOeuhisq7DcqtRbr7tpABwpFDWoPyS2SfXWBCSDBFN0NkpzRpSUAJAI5g9CNehWJxjQfSvUUwHc1MsR8QrctWdPe6yPAlSOceJ+k/7a+LJr2UOire4Qj4J2C/MmJAP8pDf6abnYrPBBsuhSMqFYyiXHhJ3jZJ9emk9HeaGRcSd4meoZc/01o2vuy9bZqpobV3dbTtJ+8glyVJ6K4I5jIAB9RqQbzNqQRvUgoLGU0/+IGvr1BBxUueXiDg6iGnkr634aM4MjcJb+VfE/jULaV0W8US3IIqGpHGUB+k8sr9un20TbegVLhJJnOYzjPgcjSmI0q0nI3Iql332e2++bVq7bTGWOd4/kdm4vmHQ+/t6jQxtHt3qNr2yLam/aZrduGiXuFr6hWNPVRryV8jo+BzzyPXlzGnBqrvm3rHe4jFdrVSVqHqJog39ddOVacqxIpJdWqLlSVr1Kdp++1KjcvbJa0pJI7bX0F7uNX8kFLTKZWZ28SF8B5ddV1s7ObpWdmt7hkhWXcN1haVjM4Uo5OQhPTJ558MnHhptWPZG0rHKZrTYKCjkPItFCFP5HPXkzXC1VMscVtkq6ZzmN4jzHodEB8JGVAgfiiW2e9JLhG0ADQa7+dD/AGIbTs24NlxVlW9ZHWwTyU9RCGCGFkP0kYJB0y6aq2jaVhpQ1RUPTLwRNGTJweeCeQPtpIXq6b07NtwXa7/AzVO2r84qKpaReJqObHCeLAJGQOv0tnBIIGR+7dr9HWUslNt2mmmuEqlI5WVcIxH1BASSR5dNPS7c3y0mSUngDtz8PPhXnDeB21vdLTfEqA0HUcI8uVaLBX/Fdpe7K+ggimo5rjOsfyDChnALe/yaJ68gNECc5JAH21T9ndoSz7dWB8mrkPeT568WOQ9cefmTqbdq6OCD4maKeMQgs3EhxjH++Naq8t1GwU2kax7Upd7NX9tj1pdIY/17kiTEyIVOgI6eJM0v98VKT7geNSuIEEY6dRzP6nVE6hyOJQR6jOsK1JqmvFWZQGLFmyPEnJ1uBAPPxOBrNLYlnIRtFeuFsd3lox3J2Xbz2/QVdwlay3GhpImmmmprggZUUZJ4Hwenhz0u4b/b5P4nQ/4lxph7hrq+8WKptTmmgFUojeZUOVBIzyz9tAlT2bXRSe4uFHKPDiDIf6HVNw0lCh3ZzDwilTL12gQ4QfKsluVC301KH76+Fa6TLPSMUkT6ZAfDyI8R6aqqnY25ICcUKTDzilU/1xp39jO1uzpNgw029rfFHe3nmeV5RKjqhbCDjQ4xgZ++qQopMxU3MTdYAXkPlvVb2ObokmramyVCxwTyt8RRKrZWRgD3sYz0JHzAejac1lr4jOs0ZPBnhfI6Z0sLxsPYReOWy3qooqiNxJHNHXKe7ZTkEcYzkH10Q7a3Ek1UtDdniprjICsdT3RjprkAcd5GT9LZOCp5Z+kkaV3jcKKwND6Ufh2NMX0sqkL4SInnTV1pqnqUVfhqeOZieYeXgAH4OdVdruJpwKWuDpwnCuRyHof99XQIIBByD0OggQdqvWgoMGoZrHiGaukmhUdXUiRR7leY/GpaMroHRgysMgg5BGvda4YYoePukCB2LsB0yep9NdqNeVbBKWRjj6SNKorQ1/aBV1AhiFPbqf4dnVAOKd8FhkeIQDP+bRVvbcTQKLZaws1xmBMan6UHTvH8kH6nkNDNMlFZLakUlQAFyzySH55XJyznzJOTp/YFVojN/wBGp2lqb24Qf+GzJPNUEADwkk9YHOphpLBKciWFST/5gX+uo+47BRS7cuCRrKzGmkZB3hwSFJH6jQ1cY5rxDJ8DTyPFxd4zcBPLPLA6nWqw7olt1wWwx0FRVRjKSo7cLKfEgeHXpp8xibzmi9q0Vwy0ilaWATiYgDGdYM3EiOh5FlP2zq2vO3L9RNIJNv3B4OI8LrEWUrnkeWfDQ7UVEkWIGi7kjorghuXvoF+6bbkKPoazbrgb0VR76HU6iqFFI7TyKvc543Y4AXqCT7apKCrEsAeRgMrxZPLljQvuK7SzFmgDfDuw4FI5OR0Zv9B99UrWAOpoJpGcFXAak7wKt9wbtaSYUVCXp435d+eTMPT+UHz6+2ohq1taUFbUUlQInLRzS94xDZ5q/XOf6jQzLVPV1MaPT8RQH6RknX1wudVV0UdG8hNPDkovj9/PHhqpDbhcSo/tVGIP2xZcZbM66HUKiPzRVt/dkVs3dS3OeFauCCVl45EBJRgVLAHoQDn7a6Vs+0ot77emnerjkqGYrTF+cZGAcH0OevUciOmDxtSSiSmjc4GRroP9lTfQgvsGz7nWLFHVMEpHkbAY+EYPg2fpz1Hy9caleIKmzQFh3dslS0aLgQo6nTca7TVyzbu2rXSWuRJZFi60dYpl4R5qwPFw+RBK+3TRFte+Xm6VQpKHb1ak3dtIVinTuyFxxYEnD5jkNN3tEqbNbNnVd33DDBLFQQtIJGGGQgdVYYZT7Ea5Q7G+3W6Jv+qrLshq7a0TIlOyAyxQF8ngbxYDhznPEB10jbsS78Sf7pyMdS61BbGfhyJ8KaUm/ahL/Pt9bJVSXOnUNJAxjQ4PQgmTDDl1Gcazrrpu6uj7tLfBa42HzM2ZpAPRRhc+5PsdLnt9ejN8tG6aYCopqsSxLLGCpKkB0IPIgjB8iDkeGhqn3vu2nggWm3DcpaJ0Ji/fYmQjqpYghuXMZ/OmZwdeimVCev7figV402y53b6cs7EbH3IppU1HHRxzNCWkqJSWlmlbiklbzY/0HQeAGhHcsFZK6MEd1XPGvjnzxoTrd17mkl423BXTA8w5Kgn35dR460/3p3H43mrPvwn/AE0Z+hdGiomtcxi7CWgkJ06RR/XTUS0MT269S0lUqfNGOJQeQ+UnljH3172dyS09xqadqWKqknkMslaJgZFGOhzzIz5eel1Ubq3AqA/2pKTnllEP/wAda13nuaMcSXVwQOR7mP8A+uiElxtWgEV8vE2FmSDPl+acV/us6V0kFJVd3HCuJuFATx4zjJ9CPzpU732tc91zQVEdZChp1ZV70HLcRBPMeWNEVFUTfBAGUyGYccjsBlmbmSceJzq0pYhGuVkLKR9s+elj9044VSdDwrN3bv6hwrV5dBSYuV1At60qjkvyvz+s+C+3ifxqoaSeqlijnqQBnq3IDVdFUmpLHHCq8kXPQf762c9N22BAUd6zVziqzmaQTl8Ynqfty+tT5ZZKCukFPMH6ZOAc+h1X1lUUV2c8TvnA9dZLxMyoiM7sQqooyWJ6ADz1HvlBV265y0lcgSdADgHIwRkYP/7x1NSQBQiFqX8QrZSNmmRQcgf11Z0pbMbRMysuGVgcEEcwc+B1SUT4Yrnrq4oHx16A41UQDTFhWYCa6c7B+1u8bs3FZdj74elrYWmLwVsoxLPIiMY4ZB9L5PPiOCSoBznS4/ad2PQ9mfbPa7ht2BaK03hBVRwKP3UUiycMsYH8hPAceAcgcsaX9FU1FFWQVtHM0FTTyLLDKpwUdSCrD2IGuhf2nqiLtL/Zn292iU0aisttWhqlT/wjJ+5mX0AkCH2xpZcs9w6ladjpULpvIQoVh+0Sv94Njx3+iIWD4qG4lAuQySrwEg+BUtg+fDz5jmhaOpkSB4QckfvY8/zLzx9xka6A7Baqm7Sex+6bYlKtX0EMlOFzz7qoQsh9hKH9uWudF72JgHBSVDhgeqsORH5zpjauJjInhXL4NvNacvUVfh4ahFeNgVl6YPRsZH5HL8a0cKHw/XQ+lU9PJ3Z5BTkEfkauGc8YmQ8pRxD/AF/XRriwpIVyorAnz3ZYUfl28P2ryb/uEAAY1rYDHPGsiSxJPMnWmVsjHCfuNCLUBrT+jLaN0FRS/CTyFpYmCocdVxy/Gr263ilsllasmJLZ4VQHmxPkNB21rvbLZQ1HxsyQycXEM9WGPDQnuC7SXi4yVRd+5J/coTyVfDl56SPkBRiqCiVUGrUQ4+WN29WOB+mtqVLcOEITPgCdViOVGMZ1mJB4gj20wQ9G5rHlwnSB9BRFYb7VWi4Ctihp55FBC98meHPUjBGD6627q3A+4KuGqlooqeWOPu2MbEhxnI6+XP8AOhnvznq2vhOfNtX/AKkERNfJcUlOQbVPRjnI5Y1a0NXHwnjDBvEgZ0OCoOep1IgreEnnw589RL6DVrLpSaLlrqYj6yPcHTJ7NN/2Sm7ON79n25a1obVebbLNQyd2z91WqBwrgA4DlU59Mr66SaVZOCVBHmDpyfswdly9pO5Zrhd43XblqZfilVirVUrDKwgjmBj5mI54wPHVdw4hTZz7UY473icpqp/Zc3kuxu1Wkq7pUfBWm4wtR10j/RHxfNG7eQVwOfgCdXX7Qlli252q3VIcfBXEi5UjJzQpN8xwRyID8f6aP+1jae2Lxd6mybP2fYbTQUuYHuiRAPJMDhigByVQgr4cRBySBrC37Mtzw2mmu9TUXk2ymFJRtXMCkEXETwhQAMAk9c+A8NLRftMKzj6UUxg776NNAeJrnSuqoe/Uq4YFeYHnqJcavvaROGWRGiOAMkZU/wDOuya/blkrrctFdtv264UyqFXu6dQwHoOR/B0q94dhlpucc1Rse6LTzpkSUFY5K58uLHGh/wAwI1wY0h0FKhE1Q5g9zbOZ0HN6Vzq1W+DiWQn/ADHWh6+XGRUSewY6k7tsN621eJbVfKCahqo+fA/MMPBgRyYHzGqfQi7gq0FRU+sGKsYqp3kXikL+WTnVgZmQAcbAeHPVDCcSqfXUySV3OSdUBUUZb3BKTNf/2Q=="> <span class="avatar-fallback">S</span> </span> </button> <div class="dropdown-menu-content user-menu-content" id="header-user-menu" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="header-user-menu-trigger" data-align="end"> <div class="dropdown-menu-label user-menu-label"> <span class="avatar user-menu-avatar" aria-hidden="true"> <img class="avatar-image" alt="" src="data:image/jpeg;base64,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"> <span class="avatar-fallback">S</span> </span> <span class="user-menu-text"> <span class="user-menu-name">shadcn</span> <span class="user-menu-detail">m@example.com</span> </span> </div> <div class="dropdown-menu-separator" role="separator"></div> <a class="dropdown-menu-item" role="menuitem" href="/account"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path> <path d="m16 9-5.5 5.5L8 12"></path> </svg> Account </a> <div class="dropdown-menu-separator" role="separator"></div> <button type="submit" class="dropdown-menu-item user-menu-sign-out" role="menuitem" form="header-user-menu-sign-out"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> <path d="m16 17 5-5-5-5"></path> <path d="M21 12H9"></path> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> </svg> Sign out </button> </div> <form id="header-user-menu-sign-out" class="user-menu-sign-out-form" method="post" action="/logout" hx-boost="false" hidden></form> </div> </header> <main class="sidebar-inset" id="main" tabindex="-1"> <h1>Home</h1> <p>The page's content.</p> </main></div>Panel-only parts
Section titled “Panel-only parts”panel-only on <sl:sidebar-header>, <sl:sidebar-footer>, <sl:sidebar-group> or <sl:sidebar-menu-item> shows
it only in the phone panel: from 768 px it is left out (display: none). In the header placement it keeps the row
short (favourites, Settings and Help in the examples above), and gives the panel a header of its own with the
application’s name, which the site header already shows on a desktop. It works in the sidebar layout too, for an
entry that is only needed on a phone.
<sl:sidebar-group id="more" panel-only> <sl:sidebar-group-label>More</sl:sidebar-group-label> ...</sl:sidebar-group>Trigger
Section titled “Trigger”The trigger is a ghost icon button with a panel icon (turned around on a right-to-left page), named “Toggle sidebar”
(the message sl.sidebar.trigger). An aria-label replaces the name, and content of its own replaces the icon:
<sl:sidebar-trigger aria-label="Menu"><sl:icon name="menu"/></sl:sidebar-trigger>for points it at a sidebar with another id than sidebar. variant and size are the button’s (icon sizes only).
Motion
Section titled “Motion”On a desktop the sidebar slides out and the page widens with it (collapsed to icons, it narrows to the strip and the
group labels slide up); on a phone the panel slides in from its edge and the backdrop fades. With reduced motion (prefers-reduced-motion: reduce) the changes are immediate.
Without JavaScript
Section titled “Without JavaScript”The parts inside the sidebar need none: the current page, the badges and the actions are all in the markup (an action
does what its attributes say), and collapsible groups are the browser’s details. Tooltips need it: without
JavaScript a strip of icons shows none. The phone panel still opens and closes: that is the browser’s popover. It is not modal then (Tab can leave it), and it
stays open when one of its links goes to a place on the same page. On a desktop nothing can collapse the sidebar, so
the trigger is hidden there (@media (scripting: none)); the sidebar shows in the state the cookie asked for, also
as a strip of icons, where a click on a group’s icon then opens a sub-menu the strip hides.
With hx-boost on the body, every page comes from the server with the sidebar in the cookie’s state, the current
page marked and the panel closed. Boosting only the main area works too: following a link in the panel closes it, and a trigger htmx swaps in is
set up again. Going back through htmx’s history shows the page with the panel closed (whether a popover is open is not
part of the markup htmx saves, and the panel closes before htmx takes its snapshot), and in the state the user chose
last: the snapshot holds the state of the moment it was taken, so the restored page reads the cookie, as the server
would.
A boosted link sends HX-Request too. A controller that answers htmx with a fragment (a table’s rows, a dialog) must
tell such a link apart, or the sidebar’s link to that page gets the fragment alone: a link the body’s boost sends has
HX-Boosted and no HX-Target (the body has no id), and wants the whole page. The
Application shell page shows the check.
Left out
Section titled “Left out”For now:
- sub-menus that open as dropdown menus while collapsed to icons (shadcn’s sidebar-06), and collapsible items nested in sub-menus to any depth, such as a file tree (sidebar-11);
- plus and minus instead of the turning chevron (sidebar-05);
SidebarInput(use<sl:input>) andSidebarMenuSkeleton(use<sl:skeleton>);SidebarRail, the strip along the sidebar’s edge that toggles it;- a second sidebar on the same page; Ctrl/⌘B toggles every sidebar on the page;
- in the header placement: sub-menus that drop down from the row (a navigation menu), and a “More” entry gathering the links that do not fit (the row scrolls instead);
- a sidebar below a header across the whole page (shadcn’s sidebar-16): see One element for a desktop and a phone.
Attributes
Section titled “Attributes”sl:sidebar-provider
Section titled “sl:sidebar-provider”| Attribute | Values | Default | Description |
|---|---|---|---|
state | expanded collapsed | — | The state to render, whatever the cookie says: for an application that keeps the choice itself, such as in the user's settings. Without it, the cookie decides. |
default-state | expanded collapsed | expanded | The state before the user chose one (no cookie yet). |
Every prop can also be set from an expression: th:state="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar
Section titled “sl:sidebar”| Attribute | Values | Default | Description |
|---|---|---|---|
id | string | sidebar | The id the trigger points at (sl:sidebar-trigger's for). |
side | left right | left | The edge it sits on, as on sl:sheet: left is the start of a line and right the end, so they swap on a right-to-left page. |
placement | sidebar header | sidebar | Where it sits on a desktop: sidebar is a column beside the page; header a row of links inside sl:site-header (the header layout), which never collapses: collapsible, the collapsed state and the trigger do not apply there (the trigger is hidden), and side only picks the phone panel's edge. Collapsible items and the parts marked panel-only are left out of the row; the phone panel is the same for both. |
variant | sidebar floating inset | sidebar | How it looks on a desktop: sidebar is a column along the edge with a border; floating a panel with a margin all round; inset lays the sidebar's ground around the page, which (sl:sidebar-inset) becomes a card on it. The phone panel looks the same for all three. In the header placement only inset counts: the page becomes a card below the header. |
collapsible | offcanvas icon none | offcanvas | How it collapses on a desktop: offcanvas moves it out of view entirely; icon narrows it to a strip of its menu buttons' icons (labels, badges, actions and sub-menus hidden; a menu button's tooltip shows its label); none never collapses it, and the trigger is hidden on a desktop. The phone panel is the same for all three. |
Every prop can also be set from an expression: th:id="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-trigger
Section titled “sl:sidebar-trigger”| Attribute | Values | Default | Description |
|---|---|---|---|
for | string | sidebar | The id of the sidebar it toggles. |
variant | default outline ghost destructive secondary link | ghost | Visual style of the button, as on sl:button. |
size | icon icon-xs icon-sm icon-lg | icon-sm | Size of the button: one of sl:button's icon sizes. |
Every prop can also be set from an expression: th:for="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-inset
Section titled “sl:sidebar-inset”| Attribute | Values | Default | Description |
|---|---|---|---|
id | string | main | The element's id, which a sl:skip-link points at (main is its default too). |
Every prop can also be set from an expression: th:id="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-header
Section titled “sl:sidebar-header”| Attribute | Values | Default | Description |
|---|---|---|---|
panel-only | boolean | — | Show it only in the phone panel: from 768 px it is left out (display: none), so a header row or a sidebar stays short. |
Every prop can also be set from an expression: th:panel-only="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-content
Section titled “sl:sidebar-content”sl:sidebar-content declares no props; every attribute passes through.
sl:sidebar-footer
Section titled “sl:sidebar-footer”| Attribute | Values | Default | Description |
|---|---|---|---|
panel-only | boolean | — | Show it only in the phone panel: from 768 px it is left out (display: none), so a header row or a sidebar stays short. |
Every prop can also be set from an expression: th:panel-only="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-separator
Section titled “sl:sidebar-separator”sl:sidebar-separator declares no props; every attribute passes through.
sl:sidebar-group
Section titled “sl:sidebar-group”| Attribute | Values | Default | Description |
|---|---|---|---|
id | string | — | The group's id. Its label gets <id>-label; without an id, each render generates one (sl-sidebar-group- and eight random characters). |
panel-only | boolean | — | Show it only in the phone panel: from 768 px it is left out (display: none), so a header row or a sidebar stays short. |
collapsible | boolean | — | Make it a section that opens and closes, on the browser's details element: its sl:sidebar-group-label (which must come first) becomes the summary, with a chevron at the end. Collapsed to icons, and in the header row, its links show whether it is open or not. |
open | boolean | — | Render a collapsible group open, for instance when it holds the current page: th:open="${#slNav.current('/build')}". |
icon-hidden | boolean | — | Leave the group out while the sidebar is collapsed to icons (collapsible="icon"), as for a group whose links have no icons of their own. Expanded, and in the phone panel, it shows as usual. |
Every prop can also be set from an expression: th:id="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-group-label
Section titled “sl:sidebar-group-label”sl:sidebar-group-label declares no props; every attribute passes through.
sl:sidebar-group-action
Section titled “sl:sidebar-group-action”| Attribute | Values | Default | Description |
|---|---|---|---|
as | button a | button | Element to render: a button, or an anchor (a) to a page. |
type | button submit reset | button | Submit behaviour of the button; defaults to button. |
Every prop can also be set from an expression: th:as="${...}". Any other attribute passes through to the rendered element, and class is appended. An aria-label or aria-labelledby is required; rendering fails without one.
sl:sidebar-group-content
Section titled “sl:sidebar-group-content”sl:sidebar-group-content declares no props; every attribute passes through.
sl:sidebar-menu
Section titled “sl:sidebar-menu”sl:sidebar-menu declares no props; every attribute passes through.
sl:sidebar-menu-item
Section titled “sl:sidebar-menu-item”| Attribute | Values | Default | Description |
|---|---|---|---|
id | string | — | The item's id. Its badge gets <id>-badge; without an id, each render generates one (sl-sidebar-menu-item- and eight random characters). |
collapsible | boolean | — | Make it a group that opens and closes, on the browser's details element (no JavaScript needed): its sl:sidebar-menu-button becomes the summary, with a chevron, and its sl:sidebar-menu-sub the content. Collapsed to icons, a click on the button expands the sidebar and opens the group. It takes no badge or action: the browser would hide them with the sub-menu. |
open | boolean | — | Render a collapsible item open, for instance when it holds the current page: th:open="${#slNav.current('/settings')}". |
panel-only | boolean | — | Show it only in the phone panel: from 768 px it is left out (display: none), so a header row or a sidebar stays short. |
Every prop can also be set from an expression: th:id="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-menu-button
Section titled “sl:sidebar-menu-button”| Attribute | Values | Default | Description |
|---|---|---|---|
as | a button | a | Element to render: an anchor (a) to a page, or a button for an action. |
active | boolean | — | The current one: the link gets aria-current="page", a button aria-current="true", and both the active look. |
variant | default outline | default | Visual style: outline adds a background and a border. |
size | default sm lg | default | Height: sm for a dense list, lg for an entry with two lines, such as the application's name in the sl:sidebar-header. |
type | button submit reset | button | Submit behaviour of a button; defaults to button. |
disabled | boolean | — | Disable it. A disabled link loses its href and leaves the tab order. |
tooltip | string | — | The label to show beside the button while the sidebar is collapsed to icons (collapsible="icon"), on hover and on keyboard focus; usually the same words as the label. Not shown while the sidebar is expanded or on a phone. It repeats the button's name, so it is hidden from assistive technology and describes nothing (sl:tooltip's mode="label"). |
Every prop can also be set from an expression: th:as="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-menu-action
Section titled “sl:sidebar-menu-action”| Attribute | Values | Default | Description |
|---|---|---|---|
as | button a | button | Element to render: a button, or an anchor (a) to a page. |
type | button submit reset | button | Submit behaviour of the button; defaults to button. |
show-on-hover | boolean | — | From 768 px, show it only while the pointer is over the item, the focus is in it, or its menu is open (aria-expanded="true"). Always shown on a phone. |
Every prop can also be set from an expression: th:as="${...}". Any other attribute passes through to the rendered element, and class is appended. An aria-label or aria-labelledby is required; rendering fails without one.
sl:sidebar-menu-badge
Section titled “sl:sidebar-menu-badge”| Attribute | Values | Default | Description |
|---|---|---|---|
label | string | — | What a screen reader says instead of the visible text, such as "12 unread messages". The visible count is then hidden from it. |
Every prop can also be set from an expression: th:label="${...}". Any other attribute passes through to the rendered element, and class is appended.
sl:sidebar-menu-sub
Section titled “sl:sidebar-menu-sub”| Attribute | Values | Default | Description |
|---|---|---|---|
collapsible | boolean | — | Open and close it with a chevron at the end of the menu button (a summary, drawn as a sl:sidebar-menu-action), so the menu button stays a link. The chevron holds only an icon, so it needs an aria-label that names the sub-menu ("Playground's pages"); every other attribute goes to the ul. |
open | boolean | — | Render a collapsible sub-menu open, for instance when it holds the current page: th:open="${#slNav.current('/playground')}". |
Every prop can also be set from an expression: th:collapsible="${...}". Any other attribute passes through to the rendered element, and class is appended. An aria-label or aria-labelledby is required when collapsible is true; rendering fails without one.
sl:sidebar-menu-sub-item
Section titled “sl:sidebar-menu-sub-item”sl:sidebar-menu-sub-item declares no props; every attribute passes through.
sl:sidebar-menu-sub-button
Section titled “sl:sidebar-menu-sub-button”| Attribute | Values | Default | Description |
|---|---|---|---|
as | a button | a | Element to render: an anchor (a) to a page, or a button for an action. |
active | boolean | — | The current one: the link gets aria-current="page", a button aria-current="true", and both the active look. |
size | sm md | md | Text size: sm for a denser list. |
type | button submit reset | button | Submit behaviour of a button; defaults to button. |
disabled | boolean | — | Disable it. A disabled link loses its href and leaves the tab order. |
Every prop can also be set from an expression: th:as="${...}". Any other attribute passes through to the rendered element, and class is appended.
JavaScript
Section titled “JavaScript”A small Alpine component, slSidebar, does the work: <sl:sidebar-provider> renders as
<div class="sidebar-provider" x-data="slSidebar" data-state="expanded">.
- It needs Alpine, and no Alpine plugin. It writes the cookie itself (a plain cookie, not
$persist, which would store JSON in the browser where the server cannot read it). Alpine is included by default; see Alpine. - On a desktop it takes
popovertargetoff the trigger and setsaria-expandedfrom the state instead: browsers report apopovertargetbutton as collapsed while its popover is closed, which the sidebar on a desktop always is. Below 768 px it puts it back. It finds the trigger by itsaria-controls. - Collapsed to icons, it expands the sidebar when a collapsible group’s icon is clicked, and opens the group.
Each menu button’s tooltip is a second small Alpine component,
slSidebarMenuTooltip, on the tooltip itself; it sharesslTooltip’s code. - It fires
sl-sidebar-toggleon the provider (it bubbles) after the user collapses or expands the sidebar and when the panel opens or closes:detailis{state: 'expanded' | 'collapsed', open, mobile}. - Keep your own
x-dataoff<sl:sidebar-provider>: it would replaceslSidebar. Put it on an element inside.