Menu is a general purpose component that can be used to display a list of options or actions.

Usage

Import

import { Menu } from '@passfort/castle'
content_copy
Copy

Example

<Menu>
  <Menu.Heading>Heading</Menu.Heading>
  <Menu.Item>
    <Menu.Title>Item 1</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 2</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 3</Menu.Title>
  </Menu.Item>
</Menu>
<Menu>
  <Menu.Heading>Heading</Menu.Heading>
  <Menu.Item>
    <Menu.Title>Item 1</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 2</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 3</Menu.Title>
  </Menu.Item>
</Menu>
content_copy
Copy
live example

Expandable

<Menu>
  <Menu.Expandable
    onClose={log('close')}
    title={<Menu.Title>Expandable</Menu.Title>}
  >
    <Menu.Item>
      <Menu.Title>Exanded item</Menu.Title>
    </Menu.Item>
  </Menu.Expandable>
  <Menu.Item>
    <Menu.Title>Item 2</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 3</Menu.Title>
  </Menu.Item>
</Menu>
<Menu>
  <Menu.Expandable
    onClose={log('close')}
    title={<Menu.Title>Expandable</Menu.Title>}
  >
    <Menu.Item>
      <Menu.Title>Exanded item</Menu.Title>
    </Menu.Item>
  </Menu.Expandable>
  <Menu.Item>
    <Menu.Title>Item 2</Menu.Title>
  </Menu.Item>
  <Menu.Item>
    <Menu.Title>Item 3</Menu.Title>
  </Menu.Item>
</Menu>
content_copy
Copy
live example