# antuikit / Menu

> Menu, with the submenu arrow and the horizontal overflow icon taken from your icon pack, and an inline menu's first level starting where a vertical menu's does.

Docs: https://antuikit.com/docs/components/menu

## Install

npx antuikit@latest init
npx antuikit@latest add menu

## Import

import { Menu } from "@/components/ui/menu";

## Demos

- [Inline](https://ui.antuikit.com/embed/menu/inline.md): Set `mode="inline"` for a sidebar, where each submenu expands in place and pushes the items below it down.
- [Horizontal](https://ui.antuikit.com/embed/menu/horizontal.md): Set `mode="horizontal"` for a navigation bar across the top of the page, where each submenu opens as a popup below its item.
- [Vertical](https://ui.antuikit.com/embed/menu/vertical.md): Set `mode="vertical"` to open each submenu as a popup beside the menu, so the menu keeps its height however deep the tree is.
- [Dark theme](https://ui.antuikit.com/embed/menu/dark.md): Set `theme="dark"` for a dark menu on a light page, like the sidebar of an admin app.
- [Groups and dividers](https://ui.antuikit.com/embed/menu/groups.md): Give an item `type: "group"` to put a heading over its children, or `type: "divider"` to draw a line between two sections.
- [Inline collapsed](https://ui.antuikit.com/embed/menu/collapsed.md): Set `inlineCollapsed` on an inline menu to shrink it to its icons, with each submenu opening as a popup to the side.
- [Controlled selection](https://ui.antuikit.com/embed/menu/controlled.md): Pass `selectedKeys` and `onSelect` to decide which item is selected yourself, like when the current route sets it.
- [Custom expand icon](https://ui.antuikit.com/embed/menu/expand-icon.md): Pass `expandIcon` to replace the submenu arrow with your own icon, like a plus that turns into a minus while the submenu is open.
- [Overflow](https://ui.antuikit.com/embed/menu/overflow.md): A horizontal menu moves the items that do not fit into one trailing submenu, marked with the icon pack's `more` icon.
- [No overflow icon](https://ui.antuikit.com/embed/menu/overflow-suppressed.md): Set `overflowedIndicator` to `null` to show the overflow submenu without an icon, or pass a node to use your own.
- [Actions menu](https://ui.antuikit.com/embed/menu/selectable.md): Set `selectable` to `false` for a list of actions, where a click fires `onClick` and no item stays highlighted.
- [Multiple selection](https://ui.antuikit.com/embed/menu/multiple.md): Set `multiple` to keep more than one item selected, like a list of filters where each click turns one on or off.
- [Accordion submenus](https://ui.antuikit.com/embed/menu/sider-current.md): Control `openKeys` and close the siblings in `onOpenChange`, so opening a submenu closes the others at its level.
- [Per-submenu theme](https://ui.antuikit.com/embed/menu/submenu-theme.md): Set `theme` on a submenu item to give its popup a theme of its own, like a light popup opening from a dark menu.
- [Switching mode and theme](https://ui.antuikit.com/embed/menu/switch-mode.md): Change `mode` and `theme` from state to switch a menu between inline and vertical, or between light and dark.
- [Collapsed tooltips](https://ui.antuikit.com/embed/menu/tooltip.md): Pass `tooltip` to configure the label a collapsed menu shows on hover, like `{ placement: "right" }`, or `false` to turn it off.
- [Custom popup](https://ui.antuikit.com/embed/menu/mega-menu.md): Pass `popupRender` to lay out a submenu's popup yourself, like a two-column product menu with an icon and a description on each item.
- [App sidebar](https://ui.antuikit.com/embed/menu/app-sidebar.md): A collapsible app sidebar with a badge count on the inbox and the signed-in user at the bottom.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/menu`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Menu` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.