Headers
Site headers with logo, navigation, and action buttons.
TopNav (Emerson Subsites)
Minimal navigation bar for Emerson subsites like notes, portfolio, etc.
Notes variant
Without Emerson branding
Basic Header
Header with site name and navigation.
Header with Actions
Include action buttons in the header slot.
Header Variants
Different visual styles for various contexts.
Bordered
Transparent
TopNav Props
| Prop | Type | Default | Description |
|---|---|---|---|
siteTitle | string | 'design system' | Site title after home icon |
homeUrl | string | '/' | Home link URL |
showEmersonBrand | boolean | true | Show Emerson branding on right |
emersonUrl | string | 'https://emerson.agency' | Emerson website URL |
Header Props
| Prop | Type | Default | Description |
|---|---|---|---|
siteName | string | — | Site/brand name displayed in header |
logo | string | — | Logo image URL |
navigation | NavItem[] | [] | Navigation items array |
sticky | boolean | false | Sticky positioning |
variant | 'default' | 'transparent' | 'bordered' | 'default' | Visual style variant |