- 1.5.0

Drawer

Renders a drawer with a header, main, and footer slot.

Read more Read less

All slots are optional, and you can render any content in them. If you want to use the drawer as a sidebar, you can use the vertical_nav/1 and vertical_nav_section/1 components.

Usage

Minimal example:

<.drawer id="drawer">
  <:main>Content</:main>
</.drawer>

With all slots:

<.drawer id="drawer">
  <:header>Doggo</:header>
  <:main>Content at the top</:main>
  <:footer>Content at the bottom</:footer>
</.drawer>

With navigation and sections:

<.drawer id="drawer">
  <:header>
    <.link navigate={~p"/"}>App</.link>
  </:header>
  <:main>
    <.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>
    <.vertical_nav_section id="search">
      <:title>Search</:title>
      <:item><input type="search" placeholder="Search" /></:item>
    </.vertical_nav_section>
  </:main>
  <:footer>
    <.vertical_nav id="user-nav" label="User menu">
      <:item>
        <.link navigate={~p"/settings"}>Settings</.link>
      </:item>
      <:item>
        <.link navigate={~p"/logout"}>Logout</.link>
      </:item>
    </.vertical_nav>
  </:footer>
</.drawer>

Page content sits beside the drawer.

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
rest :global

Any additional HTML attributes.
footer :slot

Slot for content that is rendered at the end of the drawer, potentially pinned to the bottom, if there is enough room.

 
<:footer>
  <.vertical_nav id="default-user-menu" label="User menu">
    <:item>
      <Phoenix.Component.link navigate="/settings">
        Settings
      </Phoenix.Component.link>
    </:item>
    <:item>
      <Phoenix.Component.link navigate="/logout">
        Logout
      </Phoenix.Component.link>
    </:item>
  </.vertical_nav>
</:footer>
header :slot

Optional slot for the brand name or logo.

 
<:header>
  <Phoenix.Component.link navigate="/">Pet Clinic</Phoenix.Component.link>
</:header>
main :slot

Slot for content that is rendered after the brand, at the start of the side bar.

 
<:main>
  <.vertical_nav id="default-main-nav" label="Main">
    <:item>
      <Phoenix.Component.link navigate="/dashboard">
        Dashboard
      </Phoenix.Component.link>
    </:item>
    <:item>
      <.vertical_nav_nested id="default-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>
  <.vertical_nav_section id="default-search">
    <:title>Search</:title>
    <:item><input type="search" placeholder="Search" aria-label="Search" /></:item>
  </.vertical_nav_section>
</:main>