import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Menu } from './menu.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Components/Overlays/Menu" component={Menu} />

# Menu

A customizable drop down menu component. Renders a plain list of items by default, but both the menu button and its child elements can be customized.

## Stories

### Basic

<Canvas>
  <Story height="250px" id="components-overlays-menu--interactive-basic" />
</Canvas>

### Custom Trigger and Items

<Canvas>
  <Story height="250px" id="components-overlays-menu--interactive-customized" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story id="components-overlays-menu--mixins-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-overlays-menu--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Menu} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/navigation/menu"
  type="github"
/>