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.