Doggo Storybook 0.9.0

Vertical Nav

Renders a vertical navigation menu.

Read more Read less

It is commonly placed within drawers or sidebars.

For hierarchical menu structures, use vertical_nav_nested/1 within the :item slot.

To include sections in your drawer or sidebar that are not part of the navigation menu (like informational text or a site search), use the vertical_nav_section/1 component.

Usage

<.vertical_nav label="Main">
  <:item>
    <.link navigate={~p"/dashboard"}>Dashboard</.link>
  </:item>
  <:item>
    <.vertical_nav_nested>
      <:title>Content</:title>
      <:item current_page>
        <.link navigate={~p"/posts"}>Posts</.link>
      </:item>
      <:item>
        <.link navigate={~p"/comments"}>Comments</.link>
      </:item>
    </.vertical_nav_nested>
  </:item>
</.vertical_nav>
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. []
id :string
Required label * :string
rest :global Any additional HTML attributes.
Required item * :slot Items 
<:item>
  <Phoenix.Component.link navigate="/dashboard">
    Dashboard
  </Phoenix.Component.link>
</:item>
<:item>
  <.vertical_nav_nested id="main-nav-content">
  <:title>Content</:title>
  <:item current_page>
    <Phoenix.Component.link navigate="/posts">
      Posts
    </Phoenix.Component.link>
  </:item>
  <:item>
    <Phoenix.Component.link navigate="/comments">
      Comments
    </Phoenix.Component.link>
  </:item>
</.vertical_nav_nested>

</:item>
title :slot An optional slot for the title of the menu. 
<:item>
  <.vertical_nav_nested id="main-nav-content">
  <:title>Content</:title>
  <:item current_page>
    <Phoenix.Component.link navigate="/posts">
      Posts
    </Phoenix.Component.link>
  </:item>
  <:item>
    <Phoenix.Component.link navigate="/comments">
      Comments
    </Phoenix.Component.link>
  </:item>
</.vertical_nav_nested>

</:item>