# Menu Item

## Essence

Leaf navigation item locked to `Menu`.

`Menu Item` represents one selectable destination inside a menu tree. It is not a general content link.

## Hook

Use when `Menu` needs one direct navigation target inside a group or menu branch.

## Internal Rules

- Used only inside `Menu`.
- Must not be used outside `Menu`.
- Represents a single navigation target.
- Renders native anchor navigation.
- Uses Body typography.
- Uses accent color token.
- Uses focus tokens for keyboard focus.
- Uses active/current state to mark the selected menu item.
- Uses `aria-current="page"` when active.
- Uses disabled state only when the destination should be unavailable.
- Current left offset is `44px` for alignment inside menu hierarchy.

## Use When

- `Menu` needs a leaf item that navigates to one page or section.
- A collapsible menu group needs child navigation items.
- The current page or section should be highlighted in the menu.

## Do Not Use When

- The link appears inside content copy; use `Link`.
- The item should expand or collapse children; use `Collapsible Menu Item`.
- The control mutates state instead of navigating.
- The component is outside `Menu`.

## Edge Cases

- Keep labels short enough for menu scanning.
- Preserve active state after navigation or hash changes.
- Disabled items should not be focusable or clickable.
- Do not use Menu Item as the clickable group label when `Collapsible Menu Item` owns that composition unless the group pattern explicitly requires it.

## Accessibility Notes

- The visible label should describe the destination.
- Active/current state uses `aria-current="page"`.
- Disabled state uses `aria-disabled="true"` and removes the item from tab order.
- Focus and focus-visible states must remain visible inside scrollable menu containers.

## Related Components And Patterns

- `Menu`: owner composition for Menu Item.
- `Collapsible Menu Item`: grouped menu branch that can contain Menu Item children.
- `Link`: content-level text link, not menu navigation.
- Focus tokens: govern keyboard focus appearance.

## Code Paths

- `packages/design-system/src/components/MenuItem.astro`
- `packages/design-system/src/components/Menu.astro`
- `packages/design-system/src/components/MenuBranch.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`