Doggo Storybook 0.17.0

Navbar

Renders a navigation bar.

Usage

<.navbar label="Main">
  <:brand><.link navigate={~p"/"}>Pet Clinic</.link></:brand>
  <.navbar_items>
    <:item><.link navigate={~p"/about"}>About</.link></:item>
    <:item><.link navigate={~p"/services"}>Services</.link></:item>
    <:item>
      <.link navigate={~p"/login"} class="button">Log in</.link>
    </:item>
  </.navbar_items>
</.navbar>

You can place multiple navigation item lists in the inner block. If the .navbar is styled as a flex box, you can use the CSS order property to control the display order of the brand and lists.

<.navbar label="Main">
  <:brand><.link navigate={~p"/"}>Pet Clinic</.link></:brand>
  <.navbar_items class="navbar-main-links">
    <:item><.link navigate={~p"/about"}>About</.link></:item>
    <:item><.link navigate={~p"/services"}>Services</.link></:item>
  </.navbar_items>
  <.navbar_items class="navbar-user-menu">
    <:item>
      <.button_link navigate={~p"/login"}>Log in</.button_link>
    </:item>
  </.navbar_items>
</.navbar>

If a visible heading already names the navigation, point labelledby at it instead of setting label.

<h2 id="site-nav-heading">Pet Clinic</h2>
<.navbar labelledby="site-nav-heading">
  <!-- ... -->
</.navbar>

Default

Open in playground

<div style="inline-size: 100%">
  <.navbar label="Main">
    <:brand>
      <Phoenix.Component.link navigate="/">
        Pet Clinic
      </Phoenix.Component.link>
    </:brand>
    <.navbar_items>
      <:item>
        <Phoenix.Component.link navigate="/about">
          About
        </Phoenix.Component.link>
      </:item>
      <:item>
        <Phoenix.Component.link navigate="/services">
          Services
        </Phoenix.Component.link>
      </:item>
      <:item>
        <Phoenix.Component.link navigate="/login">
          Log in
        </Phoenix.Component.link>
      </:item>
    </.navbar_items>
  </.navbar>
</div>

Multiple navigation sections

Open in playground

<div style="inline-size: 100%">
  <.navbar label="Main">
    <:brand>
      <Phoenix.Component.link navigate="/">
        Pet Clinic
      </Phoenix.Component.link>
    </:brand>
    <.navbar_items>
      <:item>
        <Phoenix.Component.link navigate="/about">
          About
        </Phoenix.Component.link>
      </:item>
      <:item>
        <Phoenix.Component.link navigate="/services">
          Services
        </Phoenix.Component.link>
      </:item>
    </.navbar_items>
    <.navbar_items>
      <:item>
        <Phoenix.Component.link navigate="/login">
          Log in
        </Phoenix.Component.link>
      </:item>
    </.navbar_items>
  </.navbar>
</div>