Nav

    <Stack gap="l">
      <Nav>
        {numerals.slice(0, 5).map((numeral) => (
          <NavItem key={numeral} isActive={numeral === numerals[1]}>
            <a href="https://grain.flodesk.com/" target="_blank">
              {numeral}
            </a>
          </NavItem>
        ))}
      </Nav>
      
      <Nav direction="column">
        {numerals.slice(0, 5).map((numeral) => (
          <NavItem key={numeral} isActive={numeral === numerals[1]}>
            <a href="https://grain.flodesk.com/" target="_blank">
              {numeral}
            </a>
          </NavItem>
        ))}
      </Nav>
    </Stack>
  

    <Nav direction="column" size="l">
      {numerals.slice(0, 5).map((numeral) => (
        <NavItem key={numeral} isActive={numeral === numerals[1]}>
          <a href="https://grain.flodesk.com/" target="_blank">
            {numeral}
          </a>
        </NavItem>
      ))}
    </Nav>
  

    <Nav
      justifyContent={{
        default: 'center',
        tablet: 'start',
      }}
    >
      {numerals.slice(0, 5).map((numeral) => (
        <NavItem key={numeral} isActive={numeral === numerals[1]}>
          <a href="https://grain.flodesk.com/" target="_blank">
            {numeral}
          </a>
        </NavItem>
      ))}
    </Nav>
  

    () => {
      const items = ['All subscribers', 'Customers', 'Segments']
      const [activeItem, setActiveItem] = useState(items[1]);
      return (
        <Nav size="xl">
          {items.map((item, i) => (
            <NavItem key={item} isActive={item === activeItem}>
              <a onClick={() => setActiveItem(item)}>
                {item}
              </a>
            </NavItem>
          ))}
        </Nav>
      )
    }