MenuVertical

A non-responsive vertical list of links or components. Designed to produce lists from data.

MenuVertical

Edit the props to see this component update live!

jsx

<Box as="nav" variant="text.ui.6" bg="ui">
  <MenuVertical
    variant="ui"
    height="sm"
    justify="center"
    data={menu}
    componentMap={{
      SiteName: (props) => {
        return (
          <FlexMenuLink {...props} justify="center">
            <BsApple />
          </FlexMenuLink>
        )
      },
    }}
  />
</Box>

<Box as="nav" variant="text.ui.6" bg="ui">
  <MenuVertical
    variant="ui"
    height="sm"
    justify="center"
    data={menu}
    componentMap={{
      SiteName: (props) => {
        return (
          <FlexMenuLink {...props} justify="center">
            <BsApple />
          </FlexMenuLink>
        )
      },
    }}
  />
</Box>

Data

Each object in an array of data must contain an "id", a "label" and a "url".

json

[
  {
    "id": 1,
    "label": "Google",
    "url": "https://google.com"
  }
]

Link component

MenuVertical uses the Link component. This makes it possible to mix internal and external urls in the data used to generate the list of links.

The Link component uses OverlayContext so that lists can be used in the OverlayComponent.

List vs nav

This component generates a list (ul). When building a menu, wrap the list in a nav element.

Styling

This components variant prop is passed through to the Link component. Therefore the variants set the colors for the links themselves. It is expected that color and background-color will be set for the containing element.

The ui variant provides link colors that work well with the page background and text colors.

Variants

Variant: mdx

Variant: ui

Variant: chrome

Variant: primary

Variant: secondary

Variant: black

Variant: grey

Variant: white

Variant: info

Variant: success

Variant: warning

Variant: error

Variant: fancy

ToDo

revisit propagation of props from the data object... (icon, isPartiallyActive, etc. per link...)