# Collapsible Menu Item

## Essence

Expandable navigation-group primitive locked to `Menu`.

`Collapsible Menu Item` groups navigation items and nested groups while preserving a consistent disclosure model inside `Menu`.

## Hook

Use when `Menu` needs a grouped navigation branch that can show or hide child items.

## Internal Rules

- Used only inside `Menu`.
- Must not be used outside `Menu`.
- Can contain `MenuItem` and nested `Collapsible Menu Item` children in any order and amount.
- Width fills the parent.
- Height wraps content.
- Never owns vertical scrolling or an internal scrollbar.
- Overflow is handled by its owning `Menu`.
- `clickable=false` means the group title is the disclosure trigger.
- `clickable=true` means the group label navigates and `Disclosure Icon Button` toggles children.
- `open` controls initial expanded/collapsed state.
- `nested` removes extra bottom spacing when used as a child group.
- Uses accent color and Body typography.

## Use When

- `Menu` needs grouped navigation.
- A `Menu` group contains child `MenuItem` links.
- A `Menu` group contains nested `Collapsible Menu Item` branches.
- A `Menu` group needs to be both a page link and a container for child links.

## Do Not Use When

- A single navigation target is needed; use `MenuItem`.
- The content is not menu/navigation structure.
- A general accordion or disclosure pattern is needed outside `Menu`.
- The group should not expose child visibility.

## Edge Cases

- Use `clickable=true` only when the label itself should navigate.
- Use `Disclosure Icon Button` only in the `clickable=true` mode.
- Keep child spacing consistent between clickable and non-clickable modes.
- Keep active state visible when a clickable group label points to the current page.
- Avoid making deeply nested menus unless the information architecture needs it.

## Accessibility Notes

- Non-clickable mode uses native `details` and `summary`.
- Clickable mode separates the label link from the disclosure button.
- The disclosure button owns `aria-expanded`, `aria-controls`, and action tooltip text.
- Disabled state should make the group unavailable and non-interactive.
- Focus states must stay visible inside scrollable menu containers.

## Related Components And Patterns

- `Menu`: owner composition for Collapsible Menu Item trees.
- `MenuItem`: leaf navigation item and clickable label primitive.
- `Disclosure Icon Button`: locked disclosure control used when `clickable=true`.
- `Icon-only Tooltip Rule`: governs tooltip behavior for the disclosure control.

## Code Paths

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