Menu

Menu is a versatile navigation component that renders a list of actionable items. It supports grouping with collapsible sections.

Import

import { Menu, MenuGroup, MenuItem } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { Layout, Menu, MenuGroup, MenuItem, Icon } from '@ui-kitten/components';

const MenuExample = () => {
  const [selectedIndex, setSelectedIndex] = useState(null);

  return (
    <Layout style={{ flex: 1 }}>
      <Menu selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)}>
        <MenuItem
          title="Dashboard"
          accessoryLeft={(props) => <Icon {...props} name="grid" />}
        />
        <MenuGroup title="Settings">
          <MenuItem title="Profile" />
          <MenuItem title="Preferences" />
        </MenuGroup>
        <MenuItem title="Logout" />
      </Menu>
    </Layout>
  );
};

Props

Menu

Property	Type	Default	Description
selectedIndex	IndexPath	undefined	The selected menu item index.
onSelect	(index: IndexPath) => void	-	Called when a menu item is selected.
children	MenuItem[] | MenuGroup[]	-	Menu items and groups.

MenuGroup

Property	Type	Default	Description
title	string | number | (props) => ReactElement	-	Group title text or render function.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory.
children	MenuItem[]	-	Nested menu items.
initiallyExpanded	boolean	false	Whether the group renders expanded on mount.

MenuGroup accepts every MenuItem property in addition to the above.

MenuItem

Property	Type	Default	Description
title	string | number | (props) => ReactElement	undefined	Item title text or render function.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory.
accessoryRight	(props) => ReactElement	undefined	Render function for the right accessory.
selected	boolean	false	Whether the item is rendered as selected. Managed by Menu.
appearance	'default' | 'grouped'	'default'	Appearance defined in the Eva mapping. grouped is applied to items inside a MenuGroup.

MenuItem also accepts all standard React Native TouchableOpacity props, including disabled. Its onPress is called with (descriptor: MenuItemDescriptor, event?: GestureResponderEvent) rather than the plain press event.

Storybook

Live examples coming soon via Storybook.