Website
SiteNavigation
Responsive navigation and explicit language or appearance choices.
Usage
When to reach for it
Use one named navigation region with a keyboard-accessible mobile drawer.
Ships from@misoto22/folio/website
import { SiteNavigation } from '@misoto22/folio/website'Notes
A public-site masthead with a keyboard-safe mobile navigation sheet.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
navigation and preferences
Navigation receives real link elements and a controlled language preference. Narrow the canvas to use the mobile sheet and its localized close action.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
NavigationSearchTrigger
A visible search entry with its keyboard shortcut, compact on small screens.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| onClickrequired | () => void | — | |
| shortcut | string | '⌘ K' | — |
PreferenceMenu
A compact named control for selecting one persistent reader preference.
| Prop | Type | Default | Description |
|---|---|---|---|
| iconrequired | ReactNode | — | |
| labelrequired | string | — | |
| onValueChangerequired | (value: string) => void | — | |
| optionsrequired | { value: string; label: string; icon?: ReactNode }[] | — | |
| valuerequired | string | — | |
| disabled | boolean | — |