Navigation modals 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 modals (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.

Examples

Below you can view various implementations and example markup.

Basic

Temporary navigation modals can toggle open or closed. Closed by default, the modal opens temporarily above all other content until a section is selected.
The Modal 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.

Scrollable

Temporary navigation modals can toggle open or closed. Closed by default, the modal opens temporarily above all other content until a section is selected.
The Modal 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.

API

API documentation for the component. Learn about imports and available attributes.

Import

There are multiple ways to import components.

    # PhoenixUI macro which imports all components
    use PhoenixUI
    # Or import component individually
    import PhoenixUI.Components.Alert