<.dm_navbar id="navbar-single-default" class="shadow">
  <:start_part>
    Star Wars
  </:start_part>
  <:end_part>
    <button type="button">action</button>
  </:end_part>
</.dm_navbar>

<.dm_navbar id="navbar-single-with-center" class="shadow">
  <:start_part>
    <span class="font-bold text-lg">MyApp</span>
  </:start_part>
  <:center_part>
    <a href="#" class="px-3">Home</a>
    <a href="#" class="px-3">About</a>
    <a href="#" class="px-3">Contact</a>
  </:center_part>
  <:end_part>
    <button type="button" class="btn btn-sm">Sign In</button>
  </:end_part>
</.dm_navbar>

<.dm_navbar id="navbar-single-start-only" class="shadow">
  <:start_part>
    <span class="font-bold text-xl">Duskmoon UI</span>
  </:start_part>
</.dm_navbar>

<.dm_navbar
  id="navbar-single-with-section-classes"
  class="shadow"
  start_class="gap-2"
  center_class="font-semibold"
  end_class="gap-4"
>
  <:start_part>
    <span class="font-bold">Brand</span>
  </:start_part>
  <:center_part>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
  </:center_part>
  <:end_part>
    <button type="button" class="btn btn-sm btn-ghost">Login</button>
    <button type="button" class="btn btn-sm btn-primary">Sign Up</button>
  </:end_part>
</.dm_navbar>

<.dm_navbar
  id="navbar-single-with-nav-label"
  class="shadow"
  nav_label="Primary site navigation"
>
  <:start_part>
    <span class="font-bold">App</span>
  </:start_part>
  <:center_part>
    <a href="#">Home</a>
    <a href="#">Features</a>
  </:center_part>
</.dm_navbar>