# Header Menu Button

## Essence

Navigation link locked to `Header`.

`Header Menu Button` gives the Header a clear right-aligned route to Design System pages.

## Hook

Use only when Header needs its Design System navigation link.

## Internal Rules

- Used only inside `Header`.
- Renders a native anchor.
- Default label is `Design System`.
- Default destination is `/design-system/`.
- Header owns its right-side alignment.
- Uses Body typography and inverse color tokens.
- Uses the shared interaction focus tokens.
- Public props are `href`, `label`, and `disabled`.
- Canonical states are `normal`, `hover`, `focus`, `focus-visible`, `pressed`, `visited`, and `disabled`.
- Disabled removes `href`, sets `aria-disabled="true"`, removes the link from tab order, and blocks pointer interaction.
- Its standalone preview renders only the component and does not simulate or embed Header.
- Its standalone preview does not reproduce Header-owned right alignment.
- Its Design System example uses `Preview` with `Inverse: true`.
- Inverse is Preview context, not a Header Menu Button prop, so its page does not expose an Inverse switcher.

## Use When

- Header needs to link to the Design System.

## Do Not Use When

- Navigation appears outside Header.
- The interaction performs an action instead of navigation.
- A generic inline link is needed; use `Link`.

## Accessibility Notes

- Keep visible destination text.
- Preserve keyboard focus visibility.
- Maintain readable contrast against the inverse Header background.

## Related Components And Patterns

- `Header`: the only owner of Header Menu Button.
- `Link`: generic inline navigation component.
- `Colors`: owns inverse foreground and background tokens.

## Code Paths

- `packages/design-system/src/components/HeaderMenuButton.astro`
- `packages/design-system/src/components/Header.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`