Menu

A menu display a set of selectable actions or options.

Basic

Source Code

import {
  Button,
  ListItemText,
  Menu,
  MenuBody,
  MenuFooter,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

import { ListItems } from '../../utils/Menu/Menu.helpers';

Grouped menu

  • You can group MenuItem in a MenuList by adding ListSubheader.
  • You can show multiple MenuList in a Menu by putting them in MenuBody.
  • You can show multiple MenuList in a horizontal direction by setting the columns prop to true for Menu.

Source Code

import {
  ListItemText,
  ListSubheader,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

import { ListItems } from '../../utils/Menu/Menu.helpers';

Sizes

  • Menu supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import {
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

import { ListItems } from '../../utils/Menu/Menu.helpers';

export const Sizes = () => {
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import {
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

import { ListItems } from '../../utils/Menu/Menu.helpers';

export const SizeResponsive = () => {

Nested-Collapsible Menu

Basic

  • You can create a collapsible menu by using CollapsibleMenuItem component.
  • CollapsibleMenuItem can be controlled open state by open and onOpenChange props.
  • CollapsibleMenuItem required label prop to render the in MenuItem as a trigger of Collapse component.

Source Code

import {
  CollapsibleMenuItem,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

export const BasicCollapsibleMenu = () => {
  return (

Nested Collapsible Menu

  • You can create a nested collapsible menu by using CollapsibleMenuItem component recursively.

Source Code

import {
  CollapsibleMenuItem,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
  MenuOption,
} from '@ocean-network-express/magenta-ui/react';

import { CollapsibleMenuItems } from '../../utils/Menu/Menu.helpers';

Menu Collapse Icon

  • Collapse Icon can be changed by passing collapseIcon prop to CollapsibleMenuItem.
  • Default collapseIcon is ChevronRightOutline.

Nested Collapsible Menu with Checkbox

Source Code

import { CaretRightFill } from '@ocean-network-express/magenta-ui/icons';
import {
  Checkbox,
  CollapsibleMenuItem,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
  MenuOption,

Dropdown Menu

  • Menu can be used as a drop-down menu by wrapping Menu in DropdownMenu component and provide trigger button in DropdownMenuTrigger to toggle the menu.

Source Code

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

Controlled open state

  • You can control Menu state with open and onOpenChange props:

Source Code

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemText,
  Menu,
  MenuBody,
  MenuFooter,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

DropdownConfig

The dropdownConfig props allow you to set the CSS of the dropdown list.

Strategy

  • The strategy prop allows you to control the positioning strategy of the popover.
  • The available strategies are absolute and fixed.
  • The default strategy is absolute.
  • View more details: Fixed position scrolling example.

Placement

  • If you want to place the drop-down menu anywhere relative to the button, use the dropdownConfig.placement prop.
  • The available base directions are top, right, bottom, left.
  • Each of these base placements has an alignment in the form [direction]-start and [direction]-end. For example, right-start, or bottom-end. These allow you to align the tooltip to the edges of the button, rather than centering it.
  • The default placement is bottom.

Note: The standalone placement prop is deprecated. Use dropdownConfig.placement instead. The placement prop will be removed in the next major version.

Source Code

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

Branched menu

  • A branched menu can be triggered from a drop-down menu by wrapping the current MenuItem in another DropdownMenu as a DropdownMenuTrigger.
  • The branched menu will be toggled from parent menu by hovering or pressing Right Arrow | Left Arrow on the MenuTrigger.

Source Code

import { ChevronRightOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,

Caret menu

  • You can show a caret icon on the drop-down menu by setting the caret prop to true in DropdownMenu.

Source Code

import { ChevronRightOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,

DropdownMenuTrigger children

  • DropdownMenuTrigger allow user to pass any element as the trigger.
  • We recommend using a button as a trigger so the menu can work correctly and ensure accessibility.

MenuItem click behavior

  • The MenuItem clicked event can be handled by the onItemClick callback prop of Menu or the onClick function of MenuItem.

Source Code

import {
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

import { ListItems } from '../../utils/Menu/Menu.helpers';
  • In the DropdownMenu component, the MenuItem clicked event will trigger a close drop-down menu. You can prevent this behavior by setting the closeOnItemClick prop of DropdownMenu to false.

Source Code

import {
  Button,
  Checkbox,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,

MenuItem active behavior

  • The MenuItem could be set to active by passing the active prop to MenuItem.

Source Code

import { AddCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

Scrolling long content

  • If the menu items exceed the available height or defined max-height of the menu, the MenuBody will be scrollable.

Source Code

import {
  Avatar,
  Button,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuBody,
  MenuFooter,
  MenuHeader,
  MenuItem,
  MenuList,
} from '@ocean-network-express/magenta-ui/react';

Source Code

// app/_components/ShowCase/Menu/Scrollable.tsx
// --------------------------------------------------
// Scrollable menu example with many items.
// Shows automatic scrolling behavior for long menus with Avatar and ListItemText.

import {
  Avatar,
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  ListItemIcon,
  ListItemText,

Searchable menu

Basic

Source Code

// app/_components/ShowCase/Menu/Searchable.tsx
// --------------------------------------------------
// Searchable menu with filtering capability.
// Demonstrates dynamic menu item filtering based on search input.

import { FilterOutline, SearchOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Checkbox,
  DropdownMenu,
  DropdownMenuTrigger,
  Indicator,

Searchable Menu with Select All

Source Code

import './style.css';

import { FilterOutline, SearchOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Checkbox,
  DropdownMenu,
  DropdownMenuTrigger,
  Indicator,
  Input,
  ListEmpty,
  ListItemIcon,

Accessibility

Menu, DropdownMenu follows WAI-ARIA recommendations:

Roles and properties

  • DropdownMenuTrigger has role="button", aria-haspopup="true", aria-expanded, aria-controls="dropdown-id" attributes
  • Menu has role="menu" attribute
  • MenuItem has role="menuitem" attribute

Keyboard navigation

Dropdown Menu Trigger

Key

Description

Down Arrow
Space
Enter
Up Arrow

Opens menu and moves focus to first menuitem

Right Arrow

Opens branched menu and moves focus to first menuitem

Left Arrow

Closes branched and moves focus to trigger menuitem

MenuList

Key

Description

Down Arrow

Moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.

Up Arrow

Moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item.

Home

Moves focus to the first menu item.

End

Moves focus to the last menu item.

Space/Enter

Trigger MenuItem clicked event.

A-Z
a-z

Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. Otherwise, focus does not move.

Escape

Closes the drop-down menu. Sets focus to the menu button.

Was this page helpful?