SIDEBAR & TOPBAR: Application shell navigation patterns
PATTERNS: Sidebar | Topbar | Drawer | Submenu
These patterns form the core application shell used across all pages. The tw-sidebar provides icon-based primary navigation with expandable drawer panels, while the tw-topbar provides search, context switching, and user controls.
Interactive: Click tw-sidebar icons to open drawer panels. Click drawer items with chevrons to expand submenus. Click outside or press Escape to close.
<div data-controller="sidebar"> <aside class="tw-sidebar">...</aside> <header class="tw-topbar">...</header> <div class="tw-sidebar-topbar-content-offset">...</div></div>
States: Default, Hover, Active. Items tw-show tooltips on hover via
data-label attribute.
<button class="tw-sidebar-item" data-label="Tooltip Text">...</button><button class="tw-sidebar-item tw-active" data-label="Tooltip Text">...</button>
States: Default, Active, Expanded, Disabled. Items with chevrons are expandable.
<a class="tw-drawer-item">...</a><a class="tw-drawer-item tw-active">...</a><button class="tw-drawer-item tw-expanded">...</button><a class="tw-drawer-item tw-disabled">...</a>
Elements: Context dropdown, Search input, Power button, Icon buttons, Avatar.
<button class="tw-topbar-dropdown">...</button><div class="tw-topbar-search"><input class="tw-topbar-search-input"></div><button class="tw-topbar-icon">...</button><button class="tw-topbar-icon tw-topbar-icon-badge">...</button><button class="tw-topbar-avatar"><img></button>
Usage: Apply these classes to main content containers to offset for fixed navigation.
.sidebar-content-offset — margin-left: 56px (sidebar only)
.sidebar-topbar-content-offset — margin-left: 56px; margin-top: 56px (both)
Built-in: ARIA attributes, keyboard navigation, focus management.