MenuItemLink
A sidebar navigation link. Optionally shows a keyboard shortcut hint and navigates on that shortcut.
Installation
pnpm dlx shadcn@latest add @chelone/menu-item-linkA sidebar navigation link. Optionally shows a keyboard shortcut hint and navigates on that shortcut.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Extra CSS class appended to the underlying `<SidebarMenuButton>`. |
| icon | ReactNode | — | Icon rendered before `label` (a lucide icon or any ReactNode). |
| keyboardShortcut | string | — | Keyboard shortcut string (e.g. `"mod+k"`, `"shift+/"`). When pressed anywhere, navigates to `to`. `mod` normalizes to `metaKey` on macOS, `ctrlKey` elsewhere. |
| keyboardShortcutRepresentation | ReactNode | — | Visual representation of the keyboard shortcut rendered after the label. Defaults to `<KeyboardShortcut keyboardShortcut={keyboardShortcut} />`. |
| label | ReactNode | — | The text rendered alongside `icon`. Strings are auto-translated via `useTranslate` (with the string itself as the fallback). Pass a ReactNode to render custom content without a translation lookup. |
| onClick | () => void | — | Click handler invoked after the default navigation. The default `<AppSidebar>` uses this to close the mobile drawer. |
| to | string | — | Target path for the link. Compared against the current location to derive the active state. |
| tooltipProps | Omit<TooltipProps, "children"> | — | Extra props forwarded to the `<Tooltip>` wrapping the menu item. |