SiteLogo
Config-driven logo with reactive theme switching. Toggle the theme switcher above to see the logo respond.
Header location (default)
Footer location
Show code
<SiteLogo location="header" />
<SiteLogo location="footer" />MainNav
Desktop primary navigation with submenu support via Dropdown.astro. Active page detection via aria-current and data-active.
Show code
<MainNav />ThemeSwitcher
Config-driven wrapper. Shows whichever variant is active in siteConfig.theme.themeSwitcher.
ThemeIconSwitcher (icon cycling)
ThemeModeSwitcher (listbox select)
ThemeSwitcher (config-driven wrapper)
siteConfig.theme.themeSwitcher Show code
{/* Icon cycling — click to cycle: system → light → dark → system */}
<ThemeIconSwitcher />
{/* Listbox select */}
<ThemeModeSwitcher />
{/* Config-driven wrapper — renders whichever variant is set in siteConfig */}
<ThemeSwitcher />SearchTrigger
Forward-compatible search entry point. When behavior is 'modal', clicking does nothing until the search modal is implemented. When behavior
is 'page', it navigates to search.href.
Icon only (default)
With label
Show code
{/* Icon only (default) */}
<SearchTrigger />
{/* With label */}
<SearchTrigger showLabel={true} />Drawer
Reusable slide-in overlay primitive. Focus-trapped, with backdrop, ESC
close, scroll lock, and prefers-reduced-motion support.
Show code
<Button data-drawer-for="demo-drawer-right">Open Drawer</Button>
<Drawer
id="demo-drawer-right"
position="right"
label="Demo drawer"
>
<div style="padding: var(--pt-space-md);">
<Heading level={3} size="md">Drawer Content</Heading>
<p>Press ESC or click the backdrop to close.</p>
<Button variant="secondary" size="sm" data-drawer-close>
Close
</Button>
</div>
</Drawer>HamburgerButton
Accessible mobile menu toggle. Shown at mobile breakpoints; hidden at desktop. Below is a standalone demo (resize the browser to see it in the header).
Show code
<HamburgerButton controls="mobile-panel-id" />