<.dm_appbar id="appbar-single-default" title="MyApp">
  <:logo>
    <span class="text-2xl font-bold">DM</span>
  </:logo>
  <:menu to="/dashboard">Dashboard</:menu>
  <:menu to="/settings">Settings</:menu>
  <:user_profile>
    <span class="text-sm">(^_^)</span>
  </:user_profile>
</.dm_appbar>

<.dm_appbar id="appbar-single-minimal" title="Duskmoon UI">
  <:logo>
    <span class="text-xl font-bold">DM</span>
  </:logo>
</.dm_appbar>

<.dm_appbar id="appbar-single-with-active-menu" title="Active Menu">
  <:logo>
    <span class="text-xl font-bold">DM</span>
  </:logo>
  <:menu to="#" active={true}>Dashboard</:menu>
  <:menu to="#">Settings</:menu>
  <:menu to="#">Reports</:menu>
</.dm_appbar>

<.dm_appbar id="appbar-single-non-sticky" title="Scrollable">
  <:logo>
    <span class="text-xl font-bold">DM</span>
  </:logo>
  <:menu to="#">Page 1</:menu>
  <:menu to="#">Page 2</:menu>
</.dm_appbar>

<.dm_appbar id="appbar-single-with-title-link" title="Linked Brand" title_to="/">
  <:logo>
    <span class="text-2xl font-bold">DM</span>
  </:logo>
  <:menu to="#">Docs</:menu>
</.dm_appbar>

<.dm_appbar
  id="appbar-single-with-nav-label"
  title="Accessible App"
  nav_label="Main application navigation"
>
  <:logo>
    <span class="text-xl font-bold">DM</span>
  </:logo>
  <:menu to="#">Home</:menu>
  <:menu to="#">About</:menu>
  <:user_profile>
    <button type="button" class="btn btn-sm btn-ghost">Login</button>
  </:user_profile>
</.dm_appbar>