Menu

Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Menu
      mode="horizontal"
      selectable
      items={[
        { label: 'Dashboards', key: 'dashboards' },
        { label: 'Charts', key: 'charts' },
        { label: 'Datasets', key: 'datasets' },
        { label: 'SQL Lab', key: 'sqllab' },
      ]}
    />
  );
}

Result

Loading...

Vertical Menu

Live Editor

function VerticalMenu() {
  return (
    <Menu
      mode="vertical"
      style={{ width: 200 }}
      items={[
        { label: 'Dashboards', key: 'dashboards' },
        { label: 'Charts', key: 'charts' },
        { label: 'Datasets', key: 'datasets' },
        {
          label: 'Settings',
          key: 'settings',
          children: [
            { label: 'Profile', key: 'profile' },
            { label: 'Preferences', key: 'preferences' },
          ],
        },
      ]}
    />
  );
}

Result

Loading...

Menu with Icons

Live Editor

function MenuWithIcons() {
  return (
    <Menu
      mode="horizontal"
      items={[
        { label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
        { label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
        { label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
        { label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
      ]}
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
mode	string	"horizontal"	Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible.
selectable	boolean	true	Whether menu items can be selected.
items	any	[{"label":"Dashboards","key":"dashboards"},{"label":"Charts","key":"charts"},{"label":"Datasets","key":"datasets"},{"label":"SQL Lab","key":"sqllab"}]	-

Import

import { Menu } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.