CADERNO UIDocumentationHomeComponentsThemingMotion Composition
Fill the brand, navigation, context, search, actions, and user slots with your content. Your application handles search, notifications, theme changes, and account menus.
Variants
surface is the default. glass is translucent, elevated adds a shadow, bold uses a dark surface, and minimal keeps only the bottom border.
Responsive layout
Navigation collapses into a menu when the container becomes narrow. Brand, search, actions, and account controls remain visible. The breakpoint follows the container, not the viewport.
close-menu-labelcloseMenuLabelstring'Close menu'labellabelstring'Site header'menu-labelmenuLabelstring'Open menu'navigation-labelnavigationLabelstring'Primary navigation'openopenbooleanfalsestickystickybooleanfalsevariantvariantCadHeaderVariant'surface'closeMenuLabelstringclose-menu-labelnolabelstringlabelnomenuLabelstringmenu-labelnonavigationLabelstringnavigation-labelnoopenbooleanopenyesstickybooleanstickyyesvariantCadHeaderVariantvariantyescad-header-menu-toggleCustomEventFired when compact navigation opens or closes.(default)Primary navigation links.actionsPersistent product actions and notifications.brandProduct identity linked to the home page.contextOptional workspace or product-suite context above navigation.searchSearch input or compact search trigger.userAccount trigger or user-menu composition.actionsProduct actions region.barResponsive header layout.brandBrand region.contextOptional navigation context.menu-toggleCompact navigation toggle.navigationPrimary navigation landmark.searchSearch region.surfaceSemantic banner landmark and visual surface.userAccount region.--cad-header-accentPer-instance ink and border accent.--cad-header-borderPer-instance border color.--cad-header-inkPer-instance text color.--cad-header-sticky-offsetOffset from the viewport edge when sticky.--cad-header-surfacePer-instance surface color.--cad-header-z-indexStacking level used when sticky.Accessibility
The compact menu exposes aria-expanded and aria-controls. Escape closes it and restores focus. Navigation stays visible before JavaScript loads. Name any icon-only actions you add.