Doggo Storybook 0.10.4-34-g3a480e9

Navbar

Renders a navigation bar.

Read more Read less

Usage

<.navbar>
  <: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>
  <: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 you have multiple <nav> elements on your page, it is recommended to set the aria-label attribute.

<.navbar aria-label="main navigation">
<!-- ... -->

</.navbar>
Default Open in playground 
<.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>
Multiple navigation sections Open in playground 
<.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>