Devie UI

Version: 2026-02-14

The Menu component extends Base UI's Menu with polished default styles and full keyboard navigation. We added custom subcomponents: SubmenuChevron for submenu trigger icons, and Shortcut for displaying keyboard shortcuts alongside menu items.

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/menu
// https://base-ui.com/react/components/menu
 
import { Menu as BaseMenu } from "@base-ui/react/menu";
import clsx from "clsx";
import { Check, ChevronRight, Circle } from "lucide-react";
import type React from "react";
import styles from "./Menu.module.scss";
 
const Root = BaseMenu.Root;
 
function Trigger({ className, ...props }: BaseMenu.Trigger.Props) {
  return (
    <BaseMenu.Trigger className={clsx(styles.trigger, className)} {...props} />
  );
}
 
const Portal = BaseMenu.Portal;
 
const Backdrop = BaseMenu.Backdrop;
 
function Positioner({ className, ...props }: BaseMenu.Positioner.Props) {
  return (
    <BaseMenu.Positioner
      className={clsx(styles.positioner, className)}
      {...props}
    />
  );
}
 
function Popup({ className, ...props }: BaseMenu.Popup.Props) {
  return (
    <BaseMenu.Popup className={clsx(styles.popup, className)} {...props} />
  );
}
 
function Arrow({ className, ...props }: BaseMenu.Arrow.Props) {
  return (
    <BaseMenu.Arrow className={clsx(styles.arrow, className)} {...props} />
  );
}
 
function Item({ className, ...props }: BaseMenu.Item.Props) {
  return <BaseMenu.Item className={clsx(styles.item, className)} {...props} />;
}
 
function LinkItem({ className, ...props }: BaseMenu.LinkItem.Props) {
  return (
    <BaseMenu.LinkItem className={clsx(styles.item, className)} {...props} />
  );
}
 
function Separator({ className, ...props }: BaseMenu.Separator.Props) {
  return (
    <BaseMenu.Separator
      className={clsx(styles.separator, className)}
      {...props}
    />
  );
}
 
function Group({ className, ...props }: BaseMenu.Group.Props) {
  return (
    <BaseMenu.Group className={clsx(styles.group, className)} {...props} />
  );
}
 
function GroupLabel({ className, ...props }: BaseMenu.GroupLabel.Props) {
  return (
    <BaseMenu.GroupLabel
      className={clsx(styles.groupLabel, className)}
      {...props}
    />
  );
}
 
function RadioGroup({ className, ...props }: BaseMenu.RadioGroup.Props) {
  return (
    <BaseMenu.RadioGroup
      className={clsx(styles.radioGroup, className)}
      {...props}
    />
  );
}
 
function RadioItem({ className, ...props }: BaseMenu.RadioItem.Props) {
  return (
    <BaseMenu.RadioItem
      className={clsx(styles.item, styles.radioItem, className)}
      {...props}
    />
  );
}
 
function RadioItemIndicator({
  className,
  children,
  ...props
}: BaseMenu.RadioItemIndicator.Props) {
  return (
    <BaseMenu.RadioItemIndicator
      className={clsx(styles.itemIndicator, className)}
      {...props}
    >
      {children || <Circle size={8} fill="currentColor" />}
    </BaseMenu.RadioItemIndicator>
  );
}
 
function CheckboxItem({ className, ...props }: BaseMenu.CheckboxItem.Props) {
  return (
    <BaseMenu.CheckboxItem
      className={clsx(styles.item, styles.checkboxItem, className)}
      {...props}
    />
  );
}
 
function CheckboxItemIndicator({
  className,
  children,
  ...props
}: BaseMenu.CheckboxItemIndicator.Props) {
  return (
    <BaseMenu.CheckboxItemIndicator
      className={clsx(styles.itemIndicator, className)}
      {...props}
    >
      {children || <Check size={16} strokeWidth={1.5} />}
    </BaseMenu.CheckboxItemIndicator>
  );
}
 
const SubmenuRoot = BaseMenu.SubmenuRoot;
 
function SubmenuTrigger({
  className,
  ...props
}: BaseMenu.SubmenuTrigger.Props) {
  return (
    <BaseMenu.SubmenuTrigger
      className={clsx(styles.item, styles.submenuTrigger, className)}
      {...props}
    />
  );
}
 
interface SubmenuChevronProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: React.ReactNode;
}
 
function SubmenuChevron({
  className,
  children,
  ...props
}: SubmenuChevronProps) {
  return (
    <div className={clsx(styles.submenuChevron, className)} {...props}>
      {children || <ChevronRight size={16} />}
    </div>
  );
}
 
interface ShortcutProps extends React.HTMLAttributes<HTMLElement> {
  className?: string;
}
 
function Shortcut({ className, ...props }: ShortcutProps) {
  return <kbd className={clsx(styles.shortcut, className)} {...props} />;
}
 
const Menu = {
  Root,
  Trigger,
  Portal,
  Backdrop,
  Positioner,
  Popup,
  Arrow,
  Item,
  LinkItem,
  Separator,
  Group,
  GroupLabel,
  RadioGroup,
  RadioItem,
  RadioItemIndicator,
  CheckboxItem,
  CheckboxItemIndicator,
  SubmenuRoot,
  SubmenuTrigger,
  SubmenuChevron,
  Shortcut,
};
 
export default Menu;

Use Cases

Simple menu

A basic menu with items and a separator. Use the disabled prop to disable specific items.

With link items

Use LinkItem for menu items that navigate to a URL. It renders an <a> element and supports the closeOnClick prop to close the menu when clicked.

With submenu

Use SubmenuRoot, SubmenuTrigger, and SubmenuChevron to create nested menus.

With groups

Use Group and GroupLabel to organize items into labeled sections.

With checkbox items

Use CheckboxItem and CheckboxItemIndicator for toggleable options within the menu.

With radio items

Use RadioGroup, RadioItem, and RadioItemIndicator for single-selection options.

<Menu />