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.

Maturity: Developing

Usage

Minimal example:

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

With all slots:

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

With navigation and sections:

<.drawer id="drawer">
  <:header>
    <.link navigate={~p"/"}>App</.link>
  </:header>
  <:body>
    <.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>
  </:body>
  <: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>

Semantics

With a header, the drawer renders role="complementary", named by the header. Set role to choose another landmark:

• role="navigation" for a drawer that is the site navigation. The header still names it.
• role={nil} for a drawer that holds a vertical_nav/1, which is a navigation landmark of its own. The page then has no complementary landmark around it.

Without a header, the drawer is no landmark unless you set role, and you name it with aria-label. With a header, the header names the drawer, and an aria-label has no effect.