PrimaryNav

Alignment

Control the alignment of the list of NavItems with the align prop. Note that a value of 'justify' will force all NavItems to be equal width and maxItemWidth will not apply.

() => {
  const alignments = ['start', 'center', 'end', 'justify'];

  return (
    <DemoLayout>
      {alignments.map((alignment) => (
        <PrimaryNav align={alignment} key={alignment}>
          <NavItem href="/malachite">Malachite</NavItem>
          <NavItem href="/fluorite">Fluorite</NavItem>
          <NavItem href="/magnetite">Magnetite</NavItem>
        </PrimaryNav>
      ))}
    </DemoLayout>
  );
}