Doggo Storybook 0.9.0

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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
Required label * :string Aria label for the `<nav>` element (e.g. "Main"). The label is especially important if you have multiple `<nav>` elements on the same page. If the page is localized, the label should be translated, too. Do not include "navigation" in the label, since screen readers will already announce the "navigation" role as part of the label.
rest :global Any additional HTML attributes.
brand :slot Slot for the brand name or logo. 
<:brand>
  <Phoenix.Component.link navigate="/">
    Pet Clinic
  </Phoenix.Component.link>
</:brand>
Required inner_block * :slot Slot for navbar items. Use the `navbar_items` component here to render navigation links or other controls.