Collapses to icons
A sidebar for an application with more pages than fit in a header row. At the top, a team switcher: a
dropdown menu opened from a large menu button. Then the
platform’s sections as collapsible items, each with its pages in a
sub-menu, the projects with a “More” menu each, and at the bottom the user menu. The
page is a card beside the sidebar (variant="inset"). The page’s header is a
site header with the trigger, a separator, the page’s
breadcrumb and the theme toggle.
On a desktop the trigger (or Ctrl/⌘+B) collapses the sidebar to a strip of icons (collapsible="icon"), with a
tooltip on every menu button, and a cookie remembers the choice. The projects have no icons worth a strip of their
own, so their group is left out of it (icon-hidden). On a phone the trigger opens the same sidebar as a panel.
Switch the preview to Phone to see it.
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"> <span class="app-logo"> <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> <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="nav-platform" role="group" aria-labelledby="nav-platform-label"> <div class="sidebar-group-label" id="nav-platform-label">Platform</div> <ul class="sidebar-menu"> <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="m7 11 2-2-2-2"></path> <path d="M11 13h4"></path> <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect> </svg> <span class="sidebar-menu-button-label">Playground</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"> Playground <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" aria-current="page" href="/playground/history"> <span class="sidebar-menu-sub-button-label">History</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/playground/starred"> <span class="sidebar-menu-sub-button-label">Starred</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/playground/settings"> <span class="sidebar-menu-sub-button-label">Settings</span> </a> </li> </ul> </details> </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="M12 8V4H8"></path> <rect width="16" height="12" x="4" y="8" rx="2"></rect> <path d="M2 14h2"></path> <path d="M20 14h2"></path> <path d="M15 13v2"></path> <path d="M9 13v2"></path> </svg> <span class="sidebar-menu-button-label">Models</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"> Models <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="/models/genesis"> <span class="sidebar-menu-sub-button-label">Genesis</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/models/explorer"> <span class="sidebar-menu-sub-button-label">Explorer</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/models/quantum"> <span class="sidebar-menu-sub-button-label">Quantum</span> </a> </li> </ul> </details> </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="M12 5v16"></path> <path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path> </svg> <span class="sidebar-menu-button-label">Documentation</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"> Documentation <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="/docs/introduction"> <span class="sidebar-menu-sub-button-label">Introduction</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/docs/get-started"> <span class="sidebar-menu-sub-button-label">Get Started</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/docs/tutorials"> <span class="sidebar-menu-sub-button-label">Tutorials</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/docs/changelog"> <span class="sidebar-menu-sub-button-label">Changelog</span> </a> </li> </ul> </details> </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="M14 17H5"></path> <path d="M19 7h-9"></path> <circle cx="17" cy="17" r="3"></circle> <circle cx="7" cy="7" 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/general"> <span class="sidebar-menu-sub-button-label">General</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" href="/settings/team"> <span class="sidebar-menu-sub-button-label">Team</span> </a> </li> <li class="sidebar-menu-sub-item"> <a class="sidebar-menu-sub-button" 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" href="/settings/limits"> <span class="sidebar-menu-sub-button-label">Limits</span> </a> </li> </ul> </details> </li> </ul> </div> <div class="sidebar-group" id="nav-projects" role="group" aria-labelledby="nav-projects-label" data-icon-hidden="true"> <div class="sidebar-group-label" id="nav-projects-label">Projects</div> <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> </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> </a> <button class="sidebar-menu-action dropdown-menu-trigger" type="button" data-show-on-hover="true" id="project-sales-more-trigger" popovertarget="project-sales-more" aria-haspopup="menu" 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> <div class="dropdown-menu-content" id="project-sales-more" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="project-sales-more-trigger" data-side="right"> <a class="dropdown-menu-item" role="menuitem" 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="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/sales/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/sales/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/travel"> <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="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"></path> <path d="M15 5.764v15"></path> <path d="M9 3.236v15"></path> </svg> <span class="sidebar-menu-button-label">Travel</span> </a> <button class="sidebar-menu-action dropdown-menu-trigger" type="button" data-show-on-hover="true" id="project-travel-more-trigger" popovertarget="project-travel-more" aria-haspopup="menu" aria-label="More for Travel"> <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-travel-more" role="menu" popover tabindex="-1" x-data="slDropdownMenu" aria-labelledby="project-travel-more-trigger" data-side="right"> <a class="dropdown-menu-item" role="menuitem" href="/projects/travel"> <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/travel/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/travel/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"> <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> <span class="sidebar-menu-button-label">More</span> </a> </li> </ul> </div> </div> <div class="sidebar-footer"> <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="/upgrade"> <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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path> <path d="M20 2v4"></path> <path d="M22 4h-4"></path> <circle cx="4" cy="20" r="2"></circle> </svg> Upgrade to Pro </a> <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="/billing"> <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> Billing </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">Playground</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">History</span> </li> </ol> </nav> <div class="site-header-end"> <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> </div> </header> <div class="page"> <h1>History</h1> <div class="placeholder-grid"> <div class="placeholder"></div> <div class="placeholder"></div> <div class="placeholder"></div> </div> <div class="placeholder placeholder-tall"></div> </div> </main></div>For reference: the shadcn/ui block this layout is based on.
The layout
Section titled “The layout”The whole layout file. It has what every layout needs.
The first sample application (sample-01) has a shorter version of it, with its own pages and no team switcher.
hx-boost on the body loads every page with htmx; see With htmx for
the one check a controller then needs. Leave out the script and the attribute for a layout without htmx.
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sl="https://shadleaf.dev/sl" th:fragment="layout(pageTitle, breadcrumb, content)"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title th:text="${pageTitle}">Page</title> <th:block th:replace="~{sl/layout :: theme-script}"></th:block> <th:block th:replace="~{sl/layout :: assets}"></th:block> <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" defer></script> <link rel="stylesheet" th:href="@{/css/application.css}"></head><body hx-boost="true"><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"><span class="app-logo"><sl:icon name="gallery-vertical-end"/></span></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" th:href="@{/teams/acme-inc}" checked>Acme Inc</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" th:href="@{/teams/acme-corp}">Acme Corp.</sl:dropdown-menu-radio-item> <sl:dropdown-menu-radio-item as="a" th: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" 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-content> <sl:sidebar-group id="nav-platform"> <sl:sidebar-group-label>Platform</sl:sidebar-group-label> <sl:sidebar-menu> <sl:sidebar-menu-item collapsible th:open="${#slNav.current('/playground')}"> <sl:sidebar-menu-button tooltip="Playground"> <sl:slot name="icon-start"><sl:icon name="square-terminal"/></sl:slot> Playground </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <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-item> <sl:sidebar-menu-sub-button th:href="@{/playground/starred}" th:active="${#slNav.current('/playground/starred')}"> Starred </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/playground/settings}" th:active="${#slNav.current('/playground/settings')}"> Settings </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('/models')}"> <sl:sidebar-menu-button tooltip="Models"> <sl:slot name="icon-start"><sl:icon name="bot"/></sl:slot> Models </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/models/genesis}" th:active="${#slNav.current('/models/genesis')}"> Genesis </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/models/explorer}" th:active="${#slNav.current('/models/explorer')}"> Explorer </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/models/quantum}" th:active="${#slNav.current('/models/quantum')}"> Quantum </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('/docs')}"> <sl:sidebar-menu-button tooltip="Documentation"> <sl:slot name="icon-start"><sl:icon name="book-open"/></sl:slot> Documentation </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/docs/introduction}" th:active="${#slNav.current('/docs/introduction')}"> Introduction </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/docs/get-started}" th:active="${#slNav.current('/docs/get-started')}"> Get Started </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/docs/tutorials}" th:active="${#slNav.current('/docs/tutorials')}"> Tutorials </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/docs/changelog}" th:active="${#slNav.current('/docs/changelog')}"> Changelog </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 tooltip="Settings"> <sl:slot name="icon-start"><sl:icon name="settings-2"/></sl:slot> Settings </sl:sidebar-menu-button> <sl:sidebar-menu-sub> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/settings/general}" th:active="${#slNav.current('/settings/general')}"> General </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-item> <sl:sidebar-menu-sub-button th:href="@{/settings/team}" th:active="${#slNav.current('/settings/team')}"> Team </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-item> <sl:sidebar-menu-sub-button th:href="@{/settings/limits}" th:active="${#slNav.current('/settings/limits')}"> Limits </sl:sidebar-menu-sub-button> </sl:sidebar-menu-sub-item> </sl:sidebar-menu-sub> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group> <sl:sidebar-group id="nav-projects" icon-hidden> <sl:sidebar-group-label>Projects</sl:sidebar-group-label> <sl:sidebar-menu> <sl:sidebar-menu-item> <sl:sidebar-menu-button th:href="@{/projects/design}" th:active="${#slNav.current('/projects/design')}"> <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" th:href="@{/projects/design}"> <sl:icon name="folder"/> View project </sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" th:href="@{/projects/design/share}"> <sl:icon name="forward"/> Share project </sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" th: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 th:href="@{/projects/sales}" th:active="${#slNav.current('/projects/sales')}"> <sl:slot name="icon-start"><sl:icon name="chart-pie"/></sl:slot> Sales & Marketing </sl:sidebar-menu-button> <sl:dropdown-menu id="project-sales-more"> <sl:dropdown-menu-trigger as="sidebar-menu-action" show-on-hover aria-label="More for Sales & Marketing"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" th:href="@{/projects/sales}"> <sl:icon name="folder"/> View project </sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" th:href="@{/projects/sales/share}"> <sl:icon name="forward"/> Share project </sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" th:href="@{/projects/sales/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 th:href="@{/projects/travel}" th:active="${#slNav.current('/projects/travel')}"> <sl:slot name="icon-start"><sl:icon name="map"/></sl:slot> Travel </sl:sidebar-menu-button> <sl:dropdown-menu id="project-travel-more"> <sl:dropdown-menu-trigger as="sidebar-menu-action" show-on-hover aria-label="More for Travel"> <sl:icon name="ellipsis"/> </sl:dropdown-menu-trigger> <sl:dropdown-menu-content side="right"> <sl:dropdown-menu-item as="a" th:href="@{/projects/travel}"> <sl:icon name="folder"/> View project </sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" th:href="@{/projects/travel/share}"> <sl:icon name="forward"/> Share project </sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" th:href="@{/projects/travel/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 th:href="@{/projects}" th:active="${#slNav.current('/projects', true)}"> <sl:slot name="icon-start"><sl:icon name="ellipsis"/></sl:slot> More </sl:sidebar-menu-button> </sl:sidebar-menu-item> </sl:sidebar-menu> </sl:sidebar-group> </sl:sidebar-content> <sl:sidebar-footer> <sl:user-menu> <sl:dropdown-menu-item as="a" th:href="@{/upgrade}"><sl:icon name="sparkles"/>Upgrade to Pro</sl:dropdown-menu-item> <sl:dropdown-menu-separator/> <sl:dropdown-menu-item as="a" th:href="@{/account}"><sl:icon name="badge-check"/>Account</sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" th:href="@{/billing}"><sl:icon name="credit-card"/>Billing</sl:dropdown-menu-item> <sl:dropdown-menu-item as="a" th: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> <th:block th:replace="${breadcrumb}"></th:block> </sl:breadcrumb-list> </sl:breadcrumb> <sl:slot name="end"><sl:theme-toggle/></sl:slot> </sl:site-header> <div class="page"> <h1 th:text="${pageTitle}"></h1> <div th:replace="${content}"></div> </div> </sl:sidebar-inset></sl:sidebar-provider><div id="modal-root"></div><sl:toaster> <sl:toast th:each="toast : ${toasts}" th:title="${toast.title}" th:description="${toast.description}" th:variant="${toast.variant}" th:duration="${toast.duration}"/></sl:toaster></body></html>The teams are links, and the server checks the current one (checked), so the switcher works without JavaScript; an
application sets it with th:checked and lists its teams with th:each. The projects’ menus are links too: a delete
link leads to a page (or, with htmx, an alert dialog) that asks first.
Without variant="inset" the sidebar is a column along the edge of the screen; with collapsible="offcanvas" it
moves out of view instead of collapsing to icons. The Sidebar page has every part and
option.
A page
Section titled “A page”A page passes its title, its breadcrumb’s levels and its content. The levels are a th:block with th:ref, so
nothing of it is rendered where it stands; the layout puts them in its <sl:breadcrumb-list>.
<html xmlns:th="http://www.thymeleaf.org" xmlns:sl="https://shadleaf.dev/sl" th:replace="~{layout/main :: layout('History', ~{::breadcrumb}, ~{::#page-content})}"><body><th:block th:ref="breadcrumb"> <sl:breadcrumb-item>Playground</sl:breadcrumb-item> <sl:breadcrumb-separator/> <sl:breadcrumb-item> <sl:breadcrumb-page>History</sl:breadcrumb-page> </sl:breadcrumb-item></th:block><div id="page-content"> ...</div></body></html>The CSS
Section titled “The CSS”Shadleaf’s CSS styles the components, not the page around them, and has no utility classes. The rest is the application’s CSS, here without Tailwind: the square behind the logo and the page’s padding.
/* The square behind the team's logo in the sidebar's header. */.app-logo { display: grid; place-items: center; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground);}.app-logo > svg { inline-size: 1rem; block-size: 1rem; }
/* The page's padding: the header above it has its own. */.page { padding: 0 1rem 1rem; }.page > h1 { margin-block-end: 1rem; font-size: 1.5rem; font-weight: 600; }