- 1.5.0

Vertical Nav Section

Renders a section within a sidebar or drawer that contains one or more items which are not navigation links.

Read more Read less

To render navigation links, use vertical_nav/1 instead.

Maturity: Developing

Usage

<.vertical_nav_section id="search-section">
  <:title>Search</:title>
  <:item><input type="search" placeholder="Search" /></:item>
</.vertical_nav_section>
Default
Open in playground
Search 
<div style="inline-size: 16rem">
  <.vertical_nav_section id="vertical-nav-section-single-default">
    <:title>Search</:title>
    <:item><input type="search" placeholder="Search" aria-label="Search" /></:item>
  </.vertical_nav_section>
</div>
Multiple items
Open in playground
Filters 
<div style="inline-size: 16rem">
  <.vertical_nav_section id="vertical-nav-section-single-multiple-items">
    <:title>Filters</:title>
    <:item><input type="search" placeholder="Search breeds" aria-label="Search breeds" /></:item>
    <:item>
      <select aria-label="Size">
        <option>All sizes</option>
        <option>Small</option>
        <option>Medium</option>
        <option>Large</option>
      </select>
    </:item>
  </.vertical_nav_section>
</div>