Doggo Storybook 0.10.4-34-g3a480e9

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.

 Read more Read less
[]

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
Show slot attributes Hide slot attributes
class :string
current_page :boolean 
<: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>