# SiteNavigation

Responsive navigation and explicit language or appearance choices.

- Group: Website
- Import: `import { SiteNavigation } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/site-navigation/

## When to reach for it

Use one named navigation region with a keyboard-accessible mobile drawer.

## 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.

## NavigationSearchTrigger

A visible search entry with its keyboard shortcut, compact on small screens.

### Props

- `label` (required) — `string`.
- `onClick` (required) — `() => void`.
- `shortcut` — `string` default `'⌘ K'`.

## PreferenceMenu

A compact named control for selecting one persistent reader preference.

### Props

- `label` (required) — `string`.
- `value` (required) — `string`.
- `onValueChange` (required) — `(value: string) => void`.
- `icon` (required) — `ReactNode`.
- `disabled` — `boolean`.
- `options` (required) — `{ value: string; label: string; icon?: ReactNode }[]`.

## SiteNavigation

A public-site masthead with a keyboard-safe mobile navigation sheet.

### Props

- `brand` (required) — `ReactNode`.
- `links` (required) — `SiteNavigationItem[]`.
- `actions` — `ReactNode`.
- `footer` — `ReactNode`.
- `label` (required) — `string`.
- `openLabel` (required) — `string`.
- `closeLabel` (required) — `string`.
- `overlay` — `boolean` default `false`. Transparent over media until the reader scrolls.
- `navigationKey` — `string`. A host navigation identity; changing it dismisses the mobile menu.

## Example — navigation and preferences

```tsx
import { PreferenceMenu, SiteNavigation } from '@misoto22/folio/website'

<SiteNavigation
  brand={<a href="#journal">Field Notes</a>}
  label="Journal navigation"
  openLabel="Open navigation"
  closeLabel="Close navigation"
  links={[
    { id: 'writing', active: true, content: <a href="#writing">Writing</a> },
    { id: 'work', content: <a href="#work">Work</a> },
    { id: 'about', content: <a href="#about">About</a> },
  ]}
  actions={<PreferenceMenu label="Language" value={language} onValueChange={setLanguage}
    icon={<RiTranslate2 size={18} aria-hidden="true" />}
    options={[{ value: 'en', label: 'English' }, { value: 'zh', label: '中文' }]} />}
/>
```