PrimaryNav

Overflow

If there is not sufficient space to display all navigation items, e.g. when a media query dictates a narrow width, they can be overflowed into a Dropdown menu with the overflowAtIndex property.

() => {
  const items = [
    {
      href: '/malachite',
      text: 'Malachite'
    },
    {
      href: '/fluorite',
      text: 'Fluorite'
    },
    {
      href: '/magnetite',
      text: 'Magnetite'
    },
    {
      href: '/aragonite',
      text: 'Aragonite'
    }
  ];

  const onChange = (selectedIndex, event) => {
    event.preventDefault();
    console.log(selectedIndex + ' clicked')
  }

  return (
    <DemoLayout style={{ width: '23em' }}>
      <PrimaryNav overflowAtIndex={2}>
        {items.map((item) => {
          return <NavItem key={item.href} {...item}>{item.text}</NavItem>
        })}
      </PrimaryNav>

      <PrimaryNav items={items} overflowAtIndex={2} onChange={onChange} />
    </DemoLayout>
  );
}