Sidebar
App shell with collapsible navigation — faint surface, accent-hover items, labeled groups, badges and submenus, no JavaScript.
INSTALL
1pnpm dlx @sayagodev/mo add sidebarOr import the files from the package (no copy):
1import "@sayagodev/mo/css/sidebar.css";2import "@sayagodev/mo/js/sidebar.js";
EXAMPLES
Demo
1<div data-sidebar-layout="always" data-collapsible="icon" data-sidebar-shortcut="b" class="sidebar-demo">2 <aside data-sidebar>3 <header>4 <ul data-sidebar-menu>5 <li>6 <mo-dropdown>7 <button type="button" popovertarget="sb-team-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Workspace: Acme Inc, Enterprise">8 <span data-sidebar-media>9 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>10 </span>11 <span>Acme Inc</span>12 <small>Enterprise</small>13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>14 </button>15 <menu popover id="sb-team-menu">16 <button role="menuitemradio" type="button" aria-checked="true">Acme Inc</button>17 <button role="menuitemradio" type="button" aria-checked="false">Acme Corp</button>18 <hr />19 <button role="menuitem" type="button">20 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>21 Add workspace22 </button>23 </menu>24 </mo-dropdown>25 </li>26 </ul>27 </header>28 <nav>29 <section data-sidebar-group>30 <div data-sidebar-label>Platform</div>31 <ul data-sidebar-menu>32 <li>33 <details open>34 <summary data-sidebar-item data-sidebar-sub-trigger>35 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2"/></svg>36 <span>Playground</span>37 </summary>38 <ul data-sidebar-sub>39 <li><a href="#" data-sidebar-sub-item><span>History</span></a></li>40 <li><a href="#" data-sidebar-sub-item><span>Starred</span></a></li>41 <li><a href="#" data-sidebar-sub-item><span>Settings</span></a></li>42 </ul>43 </details>44 </li>45 <li>46 <details>47 <summary data-sidebar-item data-sidebar-sub-trigger>48 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>49 <span>Models</span>50 </summary>51 <ul data-sidebar-sub>52 <li><a href="#" data-sidebar-sub-item><span>Genesis</span></a></li>53 <li><a href="#" data-sidebar-sub-item><span>Explorer</span></a></li>54 <li><a href="#" data-sidebar-sub-item><span>Quantum</span></a></li>55 </ul>56 </details>57 </li>58 <li>59 <details>60 <summary data-sidebar-item data-sidebar-sub-trigger>61 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v16"/><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"/></svg>62 <span>Documentation</span>63 </summary>64 <ul data-sidebar-sub>65 <li><a href="#" data-sidebar-sub-item><span>Introduction</span></a></li>66 <li><a href="#" data-sidebar-sub-item><span>Get Started</span></a></li>67 <li><a href="#" data-sidebar-sub-item><span>Tutorials</span></a></li>68 <li><a href="#" data-sidebar-sub-item><span>Changelog</span></a></li>69 </ul>70 </details>71 </li>72 <li>73 <details>74 <summary data-sidebar-item data-sidebar-sub-trigger>75 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 17H5"/><path d="M19 7h-9"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>76 <span>Settings</span>77 </summary>78 <ul data-sidebar-sub>79 <li><a href="#" data-sidebar-sub-item><span>General</span></a></li>80 <li><a href="#" data-sidebar-sub-item><span>Team</span></a></li>81 <li><a href="#" data-sidebar-sub-item><span>Billing</span></a></li>82 <li><a href="#" data-sidebar-sub-item><span>Limits</span></a></li>83 </ul>84 </details>85 </li>86 </ul>87 </section>88 <section data-sidebar-group>89 <div data-sidebar-label>Projects</div>90 <ul data-sidebar-menu>91 <li>92 <a href="#" data-sidebar-item>93 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>94 <span>Design Engineering</span>95 </a>96 </li>97 <li>98 <a href="#" data-sidebar-item>99 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>100 <span>Sales & Marketing</span>101 </a>102 </li>103 <li>104 <a href="#" data-sidebar-item>105 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>106 <span>Travel</span>107 </a>108 </li>109 </ul>110 </section>111 </nav>112 <footer>113 <ul data-sidebar-menu>114 <li>115 <mo-dropdown>116 <button type="button" popovertarget="sb-user-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Account: shadcn, [email protected]">117 <figure data-variant="avatar">CN</figure>118 <span>shadcn</span>119 <small>[email protected]</small>120 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>121 </button>122 <menu popover id="sb-user-menu">123 <div data-label class="flex items-center gap-2">124 <figure data-variant="avatar">CN</figure>125 <div>126 <div>shadcn</div>127 <small class="text-light">[email protected]</small>128 </div>129 </div>130 <hr />131 <button role="menuitem" type="button">132 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>133 Account134 </button>135 <button role="menuitem" type="button">136 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>137 Billing138 </button>139 <button role="menuitem" type="button">140 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>141 Notifications142 </button>143 <hr />144 <button role="menuitem" type="button" data-variant="danger">145 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>146 Log out147 </button>148 </menu>149 </mo-dropdown>150 </li>151 </ul>152 </footer>153 </aside>154 <main>155 <header>156 <button type="button" data-sidebar-toggle title="Toggle Sidebar" aria-label="Toggle Sidebar">157 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>158 </button>159 <p>Click the panel icon or press <kbd>Ctrl</kbd> <kbd>B</kbd> to toggle. Collapsed keeps the icons clickable (data-collapsible="icon").</p>160 </header>161 </main>162</div>163
Hidden collapse
1<div data-sidebar-layout="always" data-sidebar-shortcut="b" class="sidebar-demo">2 <aside data-sidebar>3 <header>4 <ul data-sidebar-menu>5 <li>6 <mo-dropdown>7 <button type="button" popovertarget="sb2-team-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Workspace: Acme Inc, Enterprise">8 <span data-sidebar-media>9 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>10 </span>11 <span>Acme Inc</span>12 <small>Enterprise</small>13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>14 </button>15 <menu popover id="sb2-team-menu">16 <button role="menuitemradio" type="button" aria-checked="true">Acme Inc</button>17 <button role="menuitemradio" type="button" aria-checked="false">Acme Corp</button>18 </menu>19 </mo-dropdown>20 </li>21 </ul>22 </header>23 <nav>24 <section data-sidebar-group>25 <div data-sidebar-label>Platform</div>26 <ul data-sidebar-menu>27 <li>28 <details open>29 <summary data-sidebar-item data-sidebar-sub-trigger>30 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2"/></svg>31 <span>Playground</span>32 </summary>33 <ul data-sidebar-sub>34 <li><a href="#" data-sidebar-sub-item><span>History</span></a></li>35 <li><a href="#" data-sidebar-sub-item><span>Starred</span></a></li>36 </ul>37 </details>38 </li>39 <li>40 <details>41 <summary data-sidebar-item data-sidebar-sub-trigger>42 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/></svg>43 <span>Models</span>44 </summary>45 <ul data-sidebar-sub>46 <li><a href="#" data-sidebar-sub-item><span>Genesis</span></a></li>47 <li><a href="#" data-sidebar-sub-item><span>Explorer</span></a></li>48 </ul>49 </details>50 </li>51 <li>52 <a href="#" data-sidebar-item>53 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>54 <span>Design Engineering</span>55 </a>56 </li>57 <li>58 <a href="#" data-sidebar-item>59 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>60 <span>Sales & Marketing</span>61 </a>62 </li>63 </ul>64 </section>65 </nav>66 <footer>67 <ul data-sidebar-menu>68 <li>69 <mo-dropdown>70 <button type="button" popovertarget="sb2-user-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Account: shadcn, [email protected]">71 <figure data-variant="avatar">CN</figure>72 <span>shadcn</span>73 <small>[email protected]</small>74 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>75 </button>76 <menu popover id="sb2-user-menu">77 <button role="menuitem" type="button">Account</button>78 <button role="menuitem" type="button">Billing</button>79 <hr />80 <button role="menuitem" type="button" data-variant="danger">Log out</button>81 </menu>82 </mo-dropdown>83 </li>84 </ul>85 </footer>86 </aside>87 <main>88 <header>89 <button type="button" data-sidebar-toggle title="Toggle Sidebar" aria-label="Toggle Sidebar">90 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>91 </button>92 <p>Collapsing hides the panel completely (default).</p>93 </header>94 </main>95</div>96
Right side
1<div data-sidebar-layout="right" data-sidebar-shortcut="b" class="sidebar-demo">2 <aside data-sidebar>3 <header>4 <ul data-sidebar-menu>5 <li>6 <mo-dropdown>7 <button type="button" popovertarget="sb3-team-menu" data-dropdown-side="left" data-sidebar-item data-size="lg" aria-label="Workspace: Acme Inc, Enterprise">8 <span data-sidebar-media>9 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>10 </span>11 <span>Acme Inc</span>12 <small>Enterprise</small>13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>14 </button>15 <menu popover id="sb3-team-menu">16 <button role="menuitemradio" type="button" aria-checked="true">Acme Inc</button>17 <button role="menuitemradio" type="button" aria-checked="false">Acme Corp</button>18 </menu>19 </mo-dropdown>20 </li>21 </ul>22 </header>23 <nav>24 <section data-sidebar-group>25 <div data-sidebar-label>Platform</div>26 <ul data-sidebar-menu>27 <li>28 <details open>29 <summary data-sidebar-item data-sidebar-sub-trigger>30 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2"/></svg>31 <span>Playground</span>32 </summary>33 <ul data-sidebar-sub>34 <li><a href="#" data-sidebar-sub-item><span>History</span></a></li>35 <li><a href="#" data-sidebar-sub-item><span>Starred</span></a></li>36 </ul>37 </details>38 </li>39 <li>40 <details>41 <summary data-sidebar-item data-sidebar-sub-trigger>42 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/></svg>43 <span>Models</span>44 </summary>45 <ul data-sidebar-sub>46 <li><a href="#" data-sidebar-sub-item><span>Genesis</span></a></li>47 <li><a href="#" data-sidebar-sub-item><span>Explorer</span></a></li>48 </ul>49 </details>50 </li>51 <li>52 <a href="#" data-sidebar-item>53 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>54 <span>Design Engineering</span>55 </a>56 </li>57 <li>58 <a href="#" data-sidebar-item>59 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>60 <span>Sales & Marketing</span>61 </a>62 </li>63 </ul>64 </section>65 </nav>66 <footer>67 <ul data-sidebar-menu>68 <li>69 <mo-dropdown>70 <button type="button" popovertarget="sb3-user-menu" data-dropdown-side="left" data-sidebar-item data-size="lg" aria-label="Account: shadcn, [email protected]">71 <figure data-variant="avatar">CN</figure>72 <span>shadcn</span>73 <small>[email protected]</small>74 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>75 </button>76 <menu popover id="sb3-user-menu">77 <button role="menuitem" type="button">Account</button>78 <button role="menuitem" type="button">Billing</button>79 <hr />80 <button role="menuitem" type="button" data-variant="danger">Log out</button>81 </menu>82 </mo-dropdown>83 </li>84 </ul>85 </footer>86 </aside>87 <main>88 <header>89 <button type="button" data-sidebar-toggle title="Toggle Sidebar" aria-label="Toggle Sidebar">90 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></svg>91 </button>92 <p>The sidebar sits on the right; <kbd>Ctrl</kbd> <kbd>B</kbd> still toggles.</p>93 </header>94 </main>95</div>96
Custom shortcut
1<div data-sidebar-layout="always" data-collapsible="icon" data-sidebar-shortcut="z" class="sidebar-demo">2 <aside data-sidebar>3 <header>4 <ul data-sidebar-menu>5 <li>6 <mo-dropdown>7 <button type="button" popovertarget="sb4-team-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Workspace: Acme Inc, Enterprise">8 <span data-sidebar-media>9 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>10 </span>11 <span>Acme Inc</span>12 <small>Enterprise</small>13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>14 </button>15 <menu popover id="sb4-team-menu">16 <button role="menuitemradio" type="button" aria-checked="true">Acme Inc</button>17 <button role="menuitemradio" type="button" aria-checked="false">Acme Corp</button>18 </menu>19 </mo-dropdown>20 </li>21 </ul>22 </header>23 <nav>24 <section data-sidebar-group>25 <div data-sidebar-label>Platform</div>26 <ul data-sidebar-menu>27 <li>28 <details open>29 <summary data-sidebar-item data-sidebar-sub-trigger>30 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2"/></svg>31 <span>Playground</span>32 </summary>33 <ul data-sidebar-sub>34 <li><a href="#" data-sidebar-sub-item><span>History</span></a></li>35 <li><a href="#" data-sidebar-sub-item><span>Starred</span></a></li>36 </ul>37 </details>38 </li>39 <li>40 <details>41 <summary data-sidebar-item data-sidebar-sub-trigger>42 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/></svg>43 <span>Models</span>44 </summary>45 <ul data-sidebar-sub>46 <li><a href="#" data-sidebar-sub-item><span>Genesis</span></a></li>47 <li><a href="#" data-sidebar-sub-item><span>Explorer</span></a></li>48 </ul>49 </details>50 </li>51 <li>52 <a href="#" data-sidebar-item>53 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>54 <span>Design Engineering</span>55 </a>56 </li>57 <li>58 <a href="#" data-sidebar-item>59 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>60 <span>Sales & Marketing</span>61 </a>62 </li>63 </ul>64 </section>65 </nav>66 <footer>67 <ul data-sidebar-menu>68 <li>69 <mo-dropdown>70 <button type="button" popovertarget="sb4-user-menu" data-dropdown-side="right" data-sidebar-item data-size="lg" aria-label="Account: shadcn, [email protected]">71 <figure data-variant="avatar">CN</figure>72 <span>shadcn</span>73 <small>[email protected]</small>74 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>75 </button>76 <menu popover id="sb4-user-menu">77 <button role="menuitem" type="button">Account</button>78 <button role="menuitem" type="button">Billing</button>79 <hr />80 <button role="menuitem" type="button" data-variant="danger">Log out</button>81 </menu>82 </mo-dropdown>83 </li>84 </ul>85 </footer>86 </aside>87 <main>88 <header>89 <button type="button" data-sidebar-toggle title="Toggle Sidebar" aria-label="Toggle Sidebar">90 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>91 </button>92 <p>Press <kbd>Ctrl</kbd> <kbd>Z</kbd> to toggle (data-sidebar-shortcut configures the key).</p>93 </header>94 </main>95</div>96
Header
1<aside data-sidebar>2 <header>3 <ul data-sidebar-menu>4 <li>5 <mo-dropdown style="--mo-dropdown-min-width: 12rem">6 <button type="button" popovertarget="sb-header-menu" data-sidebar-item>7 <span>Select Workspace</span>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>9 </button>10 <menu popover id="sb-header-menu">11 <button role="menuitem" type="button">12 Acme Inc13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="margin-inline-start: auto;"><path d="M20 6 9 17l-5-5"/></svg>14 </button>15 <button role="menuitem" type="button">16 Acme Corp17 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="margin-inline-start: auto; visibility: hidden;"><path d="M20 6 9 17l-5-5"/></svg>18 </button>19 <hr />20 <button role="menuitem" type="button">21 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>22 Add workspace23 </button>24 </menu>25 </mo-dropdown>26 </li>27 </ul>28 </header>29</aside>30
Footer
1<aside data-sidebar>2 <footer>3 <ul data-sidebar-menu>4 <li>5 <mo-dropdown style="--mo-dropdown-min-width: 14rem">6 <button type="button" popovertarget="sb-footer-menu" data-sidebar-item data-size="lg" aria-haspopup="menu">7 <span data-sidebar-media>CN</span>8 <span>shadcn</span>9 <small>[email protected]</small>10 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>11 </button>12 <menu popover id="sb-footer-menu">13 <div data-label class="flex items-center gap-2">14 <figure data-variant="avatar">CN</figure>15 <div>16 <div>shadcn</div>17 <small class="text-light">[email protected]</small>18 </div>19 </div>20 <hr />21 <button role="menuitem" type="button">Account</button>22 <button role="menuitem" type="button">Billing</button>23 <button role="menuitem" type="button">Notifications</button>24 <hr />25 <button role="menuitem" type="button" data-variant="danger">Log out</button>26 </menu>27 </mo-dropdown>28 </li>29 </ul>30 </footer>31</aside>32
Group
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <div data-sidebar-label>Help</div>5 <ul data-sidebar-menu>6 <li>7 <button type="button" data-sidebar-item>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>9 <span>Support</span>10 </button>11 </li>12 <li>13 <button type="button" data-sidebar-item>14 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>15 <span>Feedback</span>16 </button>17 </li>18 </ul>19 </section>20 </nav>21</aside>22
Group collapsible
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <details open>5 <summary data-sidebar-label>Help</summary>6 <ul data-sidebar-menu>7 <li>8 <button type="button" data-sidebar-item>9 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>10 <span>Support</span>11 </button>12 </li>13 <li>14 <button type="button" data-sidebar-item>15 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>16 <span>Feedback</span>17 </button>18 </li>19 </ul>20 </details>21 </section>22 </nav>23</aside>24
Menu
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <div data-sidebar-label>Projects</div>5 <ul data-sidebar-menu>6 <li>7 <a href="#" data-sidebar-item>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>9 <span>Design Engineering</span>10 </a>11 </li>12 <li>13 <a href="#" data-sidebar-item>14 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>15 <span>Sales & Marketing</span>16 </a>17 </li>18 <li>19 <a href="#" data-sidebar-item>20 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>21 <span>Travel</span>22 </a>23 </li>24 <li>25 <a href="#" data-sidebar-item>26 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>27 <span>Support</span>28 </a>29 </li>30 <li>31 <a href="#" data-sidebar-item>32 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>33 <span>Feedback</span>34 </a>35 </li>36 </ul>37 </section>38 </nav>39</aside>40
Menu badge
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <div data-sidebar-label>Projects</div>5 <ul data-sidebar-menu>6 <li>7 <a href="#" data-sidebar-item>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>9 <span>Design Engineering</span>10 <span data-sidebar-badge>24</span>11 </a>12 </li>13 <li>14 <a href="#" data-sidebar-item>15 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>16 <span>Sales & Marketing</span>17 <span data-sidebar-badge>12</span>18 </a>19 </li>20 <li>21 <a href="#" data-sidebar-item>22 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>23 <span>Travel</span>24 <span data-sidebar-badge>3</span>25 </a>26 </li>27 <li>28 <a href="#" data-sidebar-item>29 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>30 <span>Support</span>31 <span data-sidebar-badge>21</span>32 </a>33 </li>34 <li>35 <a href="#" data-sidebar-item>36 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>37 <span>Feedback</span>38 <span data-sidebar-badge>8</span>39 </a>40 </li>41 </ul>42 </section>43 </nav>44</aside>45
Menu collapsible
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <ul data-sidebar-menu>5 <li>6 <details open>7 <summary data-sidebar-item data-sidebar-sub-trigger>8 <span>Getting Started</span>9 </summary>10 <ul data-sidebar-sub>11 <li><a href="#" data-sidebar-sub-item><span>Installation</span></a></li>12 <li><a href="#" data-sidebar-sub-item><span>Project Structure</span></a></li>13 </ul>14 </details>15 </li>16 <li>17 <details>18 <summary data-sidebar-item data-sidebar-sub-trigger>19 <span>Build Your Application</span>20 </summary>21 <ul data-sidebar-sub>22 <li><a href="#" data-sidebar-sub-item><span>Routing</span></a></li>23 <li><a href="#" data-sidebar-sub-item aria-current="page"><span>Data Fetching</span></a></li>24 <li><a href="#" data-sidebar-sub-item><span>Rendering</span></a></li>25 <li><a href="#" aria-disabled="true" data-sidebar-sub-item><span>Caching</span></a></li>26 <li><a href="#" data-sidebar-sub-item><span>Styling</span></a></li>27 <li><a href="#" data-sidebar-sub-item><span>Optimizing</span></a></li>28 <li><a href="#" data-sidebar-sub-item><span>Configuring</span></a></li>29 <li><a href="#" data-sidebar-sub-item><span>Testing</span></a></li>30 <li><a href="#" data-sidebar-sub-item><span>Authentication</span></a></li>31 <li><a href="#" data-sidebar-sub-item><span>Deploying</span></a></li>32 </ul>33 </details>34 </li>35 </ul>36 </section>37 </nav>38</aside>39
Menu sub
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <ul data-sidebar-menu>5 <li>6 <details open>7 <summary data-sidebar-item data-sidebar-sub-trigger>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v16"/><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"/></svg>9 <span>Documentation</span>10 </summary>11 <ul data-sidebar-sub>12 <li><a href="#" data-sidebar-sub-item><span>Introduction</span></a></li>13 <li><a href="#" data-sidebar-sub-item aria-current="page"><span>Get Started</span></a></li>14 <li><a href="#" data-sidebar-sub-item><span>Tutorials</span></a></li>15 <li><a href="#" data-sidebar-sub-item><span>Changelog</span></a></li>16 </ul>17 </details>18 </li>19 <li>20 <details>21 <summary data-sidebar-item data-sidebar-sub-trigger>22 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 17H5"/><path d="M19 7h-9"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>23 <span>Settings</span>24 </summary>25 <ul data-sidebar-sub>26 <li><a href="#" data-sidebar-sub-item><span>General</span></a></li>27 <li><a href="#" aria-disabled="true" data-sidebar-sub-item><span>Billing</span></a></li>28 </ul>29 </details>30 </li>31 </ul>32 </section>33 </nav>34</aside>35
Group action
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <div data-sidebar-label>Projects</div>5 <button type="button" data-sidebar-action title="Add Project" aria-label="Add Project">6 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>7 </button>8 <ul data-sidebar-menu>9 <li>10 <a href="#" data-sidebar-item>11 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>12 <span>Design Engineering</span>13 </a>14 </li>15 <li>16 <a href="#" data-sidebar-item>17 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>18 <span>Sales & Marketing</span>19 </a>20 </li>21 <li>22 <a href="#" data-sidebar-item>23 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>24 <span>Travel</span>25 </a>26 </li>27 </ul>28 </section>29 </nav>30</aside>31
Menu action
1<aside data-sidebar>2 <nav>3 <section data-sidebar-group>4 <div data-sidebar-label>Projects</div>5 <ul data-sidebar-menu>6 <li>7 <a href="#" data-sidebar-item>8 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="6" y2="6"/><line x1="22" x2="2" y1="18" y2="18"/><line x1="6" x2="6" y1="2" y2="22"/><line x1="18" x2="18" y1="2" y2="22"/></svg>9 <span>Design Engineering</span>10 </a>11 <button type="button" data-sidebar-action data-show-on-hover aria-label="More">12 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>13 </button>14 </li>15 <li>16 <a href="#" data-sidebar-item>17 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>18 <span>Sales & Marketing</span>19 </a>20 <button type="button" data-sidebar-action data-show-on-hover aria-label="More">21 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>22 </button>23 </li>24 <li>25 <a href="#" data-sidebar-item>26 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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 d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>27 <span>Travel</span>28 </a>29 <button type="button" data-sidebar-action data-show-on-hover aria-label="More">30 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>31 </button>32 </li>33 </ul>34 </section>35 </nav>36</aside>37
USAGE
1<div data-sidebar-layout>2 <aside data-sidebar>3 <header>…</header>4 <section data-sidebar-group>5 <div data-sidebar-label>Projects</div>6 <ul data-sidebar-menu>7 <li><a href="#" data-sidebar-item aria-current="page">…</a></li>8 <li>9 <details open>10 <summary data-sidebar-item data-sidebar-sub-trigger>…</summary>11 <ul data-sidebar-sub><li><a data-sidebar-item href="#">…</a></li></ul>12 </details>13 </li>14 </ul>15 </section>16 <footer>…</footer>17 </aside>18 <main>…</main>19</div>
API
NAMEKINDDESCRIPTION
[data-sidebar-layout]attributeApp shell grid; ="always" enables desktop collapse
<aside data-sidebar>elementPanel surface; header/nav/footer children
[data-sidebar-item]attributeRow; aria-current="page" activates accent state
[data-sidebar-label] / [data-sidebar-badge]attributeGroup heading · right count chip
[data-sidebar-sub] + [data-sidebar-sub-trigger]attributedetails/summary sub menu with rotating chevron
--sidebar-*tokenSurface, foreground, accent and border tokens with fallbacks
FILES
src/css/sidebar.csssrc/js/sidebar.jsInstall:
mo add sidebarTHEMING · PLAYGROUND
This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.
Global tokens
--accent--accent-foreground--background--border--foreground--primary--primary-foreground--radius--ringPreview
Your CSS
Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.