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>
Default Open in playground 
<.vertical_nav id="vertical-nav-single-default" label="Main">
  <: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>
</.vertical_nav>