Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.
Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.
Below you can view various implementations and example markup.
Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.
The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the open prop.
<.button phx-click={show_drawer("#drawer_temporary_left")}>
<.heroicon name="arrow-circle-left" variant="outline" extend_class="mr-1"/>
Left
</.button>
<.drawer id={"drawer_temporary_left"}>
<div class="p-3" style="height:250px;width:250px;">
<.typography variant="h1">
Left
</.typography>
</div>
</.drawer>
<.button phx-click={show_drawer("#drawer_temporary_up")}>
<.heroicon name="arrow-circle-up" variant="outline" extend_class="mr-1"/>
Up
</.button>
<.drawer
anchor="top"
id={"drawer_temporary_up"}
>
<div class="p-3" style="height:250px;width:250px;">
<.typography variant="h1">
Up
</.typography>
</div>
</.drawer>
<.button phx-click={show_drawer("#drawer_temporary_right")}>
<.heroicon name="arrow-circle-right" variant="outline" extend_class="mr-1"/>
Right
</.button>
<.drawer
anchor="right"
id={"drawer_temporary_right"}
>
<div class="p-3" style="height:250px;width:250px;">
<.typography variant="h1">
Right
</.typography>
</div>
</.drawer>
<.button phx-click={show_drawer("#drawer_temporary_down")}>
<.heroicon name="arrow-circle-down" variant="outline" extend_class="mr-1"/>
Down
</.button>
<.drawer
anchor="bottom"
id={"drawer_temporary_down"}
>
<div class="p-3" style="height:250px;width:250px;">
<.typography variant="h1">
Down
</.typography>
</div>
</.drawer>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Alert
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| align | :center | :inherit | :justify | :left | :right | :inherit | Set the text-align on the component. |
| color | any framework-provided color | :slate | The text color to use. |
| element | Any HTML Element | :p | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| margin | bool | true | If true, the text will have margin. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| variant | :h1 | :h2 | :h3 | :h4 | :p | :p | The links to use. |