Navbar

<header class="ui-navbar ui-navbar--sticky ui-navbar--island"
  data-close-on-outside-click data-close-on-swipe>
  <div class="ui-navbar__inner">
    <div class="ui-navbar__brand">
      <img src="../favicon.svg" alt="" width="22" height="22" />
      <span>Caustica Design</span>
    </div>
    <button type="button" class="ui-navbar__toggle"
      aria-label="Open menu" aria-expanded="false"
      aria-controls="app-nav-collapse">
      <span class="ui-navbar__toggle-bars" aria-hidden="true">
        <span class="ui-navbar__toggle-bar"></span>
        <span class="ui-navbar__toggle-bar"></span>
        <span class="ui-navbar__toggle-bar"></span>
      </span>
    </button>
    <div class="ui-navbar__collapse" id="app-nav-collapse">
      <nav class="ui-nav" aria-label="Primary">…</nav>
      <div class="ui-navbar__actions">
        <button type="button" class="btn btn-primary btn-compact">Get started</button>
      </div>
    </div>
  </div>
</header>

import {
  Navbar,
  NavbarBrand,
  NavbarToggle,
  NavbarCollapse,
  NavbarActions,
  Nav,
  NavItem,
  NavLink,
  Button,
} from 'caustica-design/core'

<Navbar sticky variant="island" closeOnOutsideClick closeOnSwipe>
  <NavbarBrand>
    <img src="../favicon.svg" alt="" width={22} height={22} />
    <span>Caustica Design</span>
  </NavbarBrand>
  <NavbarToggle label="Open menu" />
  <NavbarCollapse>
    <Nav aria-label="Primary">
      <NavItem><NavLink href="../index.html" active>Overview</NavLink></NavItem>
      <NavItem><NavLink href="./index.html">Components</NavLink></NavItem>
    </Nav>
    <NavbarActions>
      <Button variant="primary" compact>Get started</Button>
    </NavbarActions>
  </NavbarCollapse>
</Navbar>