- 1.5.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.

If the list is part of a navigation landmark you render yourself, set landmark={false}. The component then renders a <div> instead of a <nav>, and the label names the list.

Maturity: Developing

Usage

<.vertical_nav id="main-nav" label="Main">
  <:item>
    <.link navigate={~p"/dashboard"}>Dashboard</.link>
  </:item>
  <:item>
    <.vertical_nav_nested id="content-nav">
      <: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>

Inside a navigation landmark:

<nav aria-label="Main">
  <.vertical_nav id="project-nav" landmark={false}>
    <:title>Projects</:title>
    <:item>
      <.link navigate={~p"/projects/1"}>Adoption</.link>
    </:item>
  </.vertical_nav>
</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.
Required id * :string
label :string

The aria label for the <nav> element, or for the list if landmark

 Read more Read less

is false. Set only one of label, labelledby and the :title slot.

Do not repeat the word navigation in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this navigation, for a heading the

 Read more Read less

component does not render itself. Set only one of label, labelledby and the :title slot.
landmark :boolean

Renders the navigation as a <nav> landmark. Set it to false if the

 Read more Read less
true

component is placed inside an existing navigation landmark. The component then renders a <div>, the label names the list instead, and a label is optional.
rest :global

Any additional HTML attributes.
Required item * :slot

Items
Show slot attributes Hide slot attributes
class :any

Additional CSS classes. Can be a string or a list of strings.
current_page :boolean 
<:item>
  <Phoenix.Component.link navigate="/dashboard">
    Dashboard
  </Phoenix.Component.link>
</:item>
<:item>
  <.vertical_nav_nested id="vertical-nav-main-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. If used, it names the navigation, and label and labelledby don't need to be set.

 
<:item>
  <.vertical_nav_nested id="vertical-nav-main-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>