NavItem

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>