PhoenixDuskmoon.Component.Navigation.Appbar (PhoenixDuskmoon v9.0.1)

View Source

Appbar component using @duskmoon-dev/core CSS classes.

Uses CSS classes: appbar, appbar-sticky, appbar-primary, appbar-elevated, appbar-brand, appbar-title, appbar-actions, appbar-action, appbar-nav.

Examples

<.dm_appbar title="MyApp" title_to="/">
  <:menu to="/dashboard">Dashboard</:menu>
  <:logo><img src="/logo.svg" /></:logo>
  <:user_profile>User Menu</:user_profile>
</.dm_appbar>

Summary

Functions

dm_appbar(assigns)

Generates an appbar using @duskmoon-dev/core CSS classes.

dm_simple_appbar(assigns)

Generates a simple responsive HTML appbar with mobile menu toggle.

Functions

dm_appbar(assigns)

Generates an appbar using @duskmoon-dev/core CSS classes.

Example

<.dm_appbar title="PhoenixDuskmoon" class="appbar-primary appbar-elevated">
  <:menu to={~p"/storybook"}>Component Storybook</:menu>
  <:logo><.dm_mdi name="moon-waning-crescent" class="w-8 h-8" /></:logo>
  <:user_profile>(^_^)</:user_profile>
</.dm_appbar>

Attributes

  • id (:any) - HTML id attribute. Defaults to nil.
  • class (:any) - Additional CSS classes (e.g., appbar-primary, appbar-elevated). Defaults to nil.
  • title (:string) - Appbar title. Defaults to "".
  • title_to (:string) - Navigation path for brand area (logo + title). Defaults to nil.
  • sticky (:boolean) - Whether the appbar is sticky. Defaults to true.
  • nav_label (:string) - Accessible label for the navigation landmark (i18n). Defaults to "Main navigation".
  • Global attributes are accepted.

Slots

  • menu - Appbar navigation menus. Accepts attributes:
    • class (:any) - menu item CSS classes.
    • to (:string) - navigation path.
    • active (:boolean) - whether this menu item is the current page.
  • logo - Appbar Logo (displayed in the brand area).
  • user_profile - Appbar right side user profile / actions.

dm_simple_appbar(assigns)

Generates a simple responsive HTML appbar with mobile menu toggle.

Example

<.dm_simple_appbar title="PhoenixDuskmoon">
  <:menu to={~p"/storybook"}>Component Storybook</:menu>
  <:logo><.dm_mdi name="moon-waning-crescent" class="w-8 h-8" /></:logo>
  <:user_profile>(^_^)</:user_profile>
</.dm_simple_appbar>

Attributes

  • id (:any) - HTML id attribute. Defaults to nil.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • title (:string) - Appbar title. Defaults to "".
  • toggle_menu_label (:string) - Accessible label for the mobile menu toggle button. Defaults to "Toggle mobile menu".
  • nav_label (:string) - Accessible label for the navigation landmark (i18n). Defaults to "Main navigation".
  • Global attributes are accepted.

Slots

  • menu - Appbar menus. Accepts attributes:
    • class (:any) - menu item CSS classes.
    • to (:string) - navigation path.
    • active (:boolean) - whether this menu item is the current page.
  • logo - Appbar Logo.
  • user_profile - Appbar right side user profile.