```
const { Bar, NavButton, NavDropdown, NavItemWrapper, NavItemSeparation } = NavBar;
const { Trigger, Content, Item } = NavDropdown;
<div>
  <NavBar size="sm">
    <Bar justify="left">
      <NavButton
        onClick={() => alert('on click')}
        size="nav-bar"
        variant="dash-lagoon"
        active
      >
        Coverage
      </NavButton>
    </Bar>
    <Bar justify="center">
      <NavDropdown>
        <Trigger>Technology</Trigger>
        <Content maxItems="5">
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
        </Content>
      </NavDropdown>
      <NavButton onClick={() => alert('on click')}>Solutions</NavButton>
      <NavButton onClick={() => alert('on click')}>Coverage</NavButton>
    </Bar>
    <Bar justify="right">
      <NavDropdown>
        <Trigger>News</Trigger>
        <Content>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
        </Content>
      </NavDropdown>
      <NavButton onClick={() => alert('on click')}>About us</NavButton>
      <NavItemSeparation />
      <NavItemWrapper>
        <Button size="sm" >Sign up</Button>
      </NavItemWrapper>
      <NavDropdown variant="launcher" reverse>
        <Trigger>
          <Icon size="sm" name="app-launcher" />
        </Trigger>
        <Content maxItems="5" itemsPerRow={2}>
          <Item>
            <Title component='strong' level={5} withoutMarge strong>Sigfox</Title>
            <p>Sigfox description, nulla facilisi. Tristique tincidunt tellus condimentum.</p>
          </Item>
          <Item>
            <Title component='strong' level={5} withoutMarge strong>Partner Network</Title>
            <p>Partner Network description, nulla facilisi. Imperdiet dolor dapibus condimentum.</p>
          </Item>
          <Item>
            <Title component='strong' level={5} withoutMarge strong>Support</Title>
            <p>Support description, nulla facilisi. Phasellus tristique tincidunt tellus.</p>
          </Item>
          <Item>
            <Title component='strong' level={5} withoutMarge strong>Build</Title>
            <p>Build description, nulla facilisi. Eu imperdiet dolor dapibus condimentum.</p>
          </Item>
        </Content>
      </NavDropdown>
    </Bar>
  </NavBar>
  <NavBar level={2}>
    <Bar justify="left">
      <NavDropdown level={2} active>
        <Trigger>Solutions</Trigger>
        <Content maxItems="5">
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
          <Item>hello hello hello hello</Item>
        </Content>
      </NavDropdown>
      <NavButton
        onClick={() => alert('on click')}
        level={2}
      >
        Button with multiline content
      </NavButton>
    </Bar>
  </NavBar>
</div>
```