Skip to content

Latest commit

 

History

History
44 lines (37 loc) · 1.58 KB

readme.md

File metadata and controls

44 lines (37 loc) · 1.58 KB
Raw

MenuSection

Define menu sections with labels. Useful for creating multisectioned dropdown menu's.

Basic Usage

<MenuSection> can be used to compose menus with a combination of various components passed as children.

import { MenuSection } from '@folio/stripes/components';

<MenuSection id="menu-layout" label="Layout" labelTag="h3">
  <RadioButton name="layout" label="Automatic layout" />
  <RadioButton name="layout" label="Always use table layout" />
  <RadioButton name="layout" label="Always use cards layout" />
</MenuSection>

<MenuSection id="menu-columns" label="Columns" labelTag="h3">
  <Checkbox label="Name" />
  <Checkbox label="Email" />
  <Checkbox label="Barcode" />
</MenuSection>

<MenuSection id="menu-actions" label="Actions" labelTag="h3">
  <Button buttonStyle="dropdownItem">
    <Icon icon="trash">Delete</Icon>
  </Button>
  <Button buttonStyle="dropdownItem">
    <Icon icon="edit">Batch edit</Icon>
  </Button>
  <Button buttonStyle="dropdownItem">
    <Icon icon="bookmark">Bookmark</Icon>
  </Button>
</MenuSection>

Props

Additional props passed to MenuSection will be spread on the root element.

Name Type Description Default
children node Adds content to the MenuSection undefined
className string Apply a custom class name to the root element of MenuSection undefined
id string Applies an ID on the root element. An ID will be autogenerated if none is specified (autogenerated)
label string, node Renders a label on the MenuSection undefined
labelTag string Defines the tagName of the label element div