- 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>
Default
Open in playground 
<div style="inline-size: 16rem">
  <.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="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>
  </.vertical_nav>
</div>
With section
Open in playground

A section contains one or more items that are not navigation links.

<div style="display: grid; gap: 1.5rem; inline-size: 16rem">
  <.vertical_nav id="vertical-nav-single-with-section" label="Main">
    <:item>
      <Phoenix.Component.link navigate="/dashboard">
        Dashboard
      </Phoenix.Component.link>
    </:item>
    <:item>
      <.vertical_nav_nested id="sectioned-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>
  <.vertical_nav_section id="sectioned-nav-search">
    <:title>Search</:title>
    <:item><input type="search" placeholder="Search" aria-label="Search" /></:item>
  </.vertical_nav_section>
</div>
Without landmark
Open in playground

With landmark={false}, the component renders a <div>, and the label names the list. Use it when rendering the component inside an existing navigation landmark.

<nav aria-label="Main" style="inline-size: 16rem">
  <.vertical_nav id="vertical-nav-single-without-landmark" label="Projects">
    <:item>
      <Phoenix.Component.link navigate="/dashboard">
        Dashboard
      </Phoenix.Component.link>
    </:item>
    <:item>
      <.vertical_nav_nested id="vertical-nav-inner-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>
</nav>