NavItem | Mineral UI

NavItem, along with either PrimaryNav or SecondaryNav, provides navigation options for an app.

Examples #

Import Syntax #

import { NavItem, PrimaryNav, SecondaryNav } from 'mineral-ui/Navigation';

Basic Usage #

Use NavItem within a PrimaryNav or SecondaryNav to define the navigation options.

Note

The href prop provided below corresponds with the default element of 'a'. If providing a different element, be sure to also provide the appropriate prop. E.g. React Router's Link uses the to prop.

<DemoLayout>
  <PrimaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </SecondaryNav>
</DemoLayout>

Selected #

Use the selected property to define which navigation option is currently being viewed.

<DemoLayout>
  <PrimaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem selected href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem selected href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </SecondaryNav>
</DemoLayout>

Icons #

NavItem can contain an Icon before its text.

<DemoLayout>
  <PrimaryNav>
    <NavItem icon={<IconInfoOutline />} href="/bio">Bio</NavItem>
    <NavItem icon={<IconMusicNote />} href="/albums">Albums</NavItem>
    <NavItem icon={<IconCameraAlt />} href="/photos">Photos</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem icon={<IconInfoOutline />} href="/bio">Bio</NavItem>
    <NavItem icon={<IconMusicNote />} href="/albums">Albums</NavItem>
    <NavItem icon={<IconCameraAlt />} href="/photos">Photos</NavItem>
  </SecondaryNav>
</DemoLayout>

Disabled #

Use the disabled property to indicate that NavItem is not available for interaction.

<DemoLayout>
  <PrimaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem disabled href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem disabled href="/fluorite">Fluorite</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </SecondaryNav>
</DemoLayout>

Maximum Width #

Use the maxWidth prop to constrain the width of NavItem. Note that if the NavItem text is longer than the maximum width, it will be truncated but accessible via Tooltip. Also note that if maxItemWidth is passed to PrimaryNav or SecondaryNav, maxWidth on NavItem will take precedence.

<DemoLayout>
  <PrimaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem maxWidth="6em" href="/fluorite">Fluorite Will Truncate</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem href="/malachite">Malachite</NavItem>
    <NavItem maxWidth="6em" href="/fluorite">Fluorite Will Truncate</NavItem>
    <NavItem href="/magnetite">Magnetite</NavItem>
  </SecondaryNav>
</DemoLayout>

Element #

Any component that renders an <a /> element may be used for NavItem by specifying the as prop, such as a React Router Link.

<DemoLayout>
  <PrimaryNav>
    <NavItem as={ReactRouterLink} to="/components/malachite">Malachite</NavItem>
    <NavItem as={ReactRouterLink} to="/components/fluorite">Fluorite</NavItem>
    <NavItem as={ReactRouterLink} to="/components/magnetite">Magnetite</NavItem>
  </PrimaryNav>
  <SecondaryNav>
    <NavItem as={ReactRouterLink} to="/components/malachite">Malachite</NavItem>
    <NavItem as={ReactRouterLink} to="/components/fluorite">Fluorite</NavItem>
    <NavItem as={ReactRouterLink} to="/components/magnetite">Magnetite</NavItem>
  </SecondaryNav>
</DemoLayout>

API & Theme #

NavItem Props #

The NavItem component takes the following React props.

Name	Type	Description
children	React$Node	Content of NavItem
disabled	boolean	Disables NavItem
icon	React$Element<*>	Icon placed before the text
maxWidth	number \| string	Maximum width of NavItem
selected	boolean	Selected state of NavItem

Undocumented properties, including as and css, will be applied to the root element.