- 1.5.0

Bottom Navigation

Renders a navigation that sticks to the bottom of the screen.

Read more Read less

Maturity: Experimental

Usage

<.bottom_navigation current_value={@view} label="Main">
  <:item
    label="Profile"
    navigate={~p"/pets/#{@pet}"}
    value={Profile}
  >
    <Lucideicons.user aria-hidden="true" />
  </:item>
  <:item
    label="Appointments"
    navigate={~p"/pets/#{@pet}/appointments"}
    value={Appointments}
  >
    <Lucideicons.calendar_days aria-hidden="true" />
  </:item>
  <:item
    label="Messages"
    navigate={~p"/pets/#{@pet}/messages"}
    value={Messages}
  >
    <Lucideicons.mails aria-hidden="true" />
  </:item>
</.bottom_navigation>
Default
Open in playground 
<div style="inline-size: 100%">
  <.bottom_navigation label="Main" current_value={Profile}>
    <:item label="Profile" navigate="/profile" value={Profile}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-user"
      aria-hidden="true"
    >
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle
        cx="12"
        cy="7"
        r="4"
      />
    </svg>
    </:item>
    <:item label="Appointments" navigate="/appointments" value={Appointments}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-calendar-days"
      aria-hidden="true"
    >
      <rect width="18" height="18" x="3" y="4" rx="2" ry="2" /><line
        x1="16"
        x2="16"
        y1="2"
        y2="6"
      /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /><path d="M8 14h.01" /><path d="M12 14h.01" /><path d="M16 14h.01" /><path d="M8 18h.01" /><path d="M12 18h.01" /><path d="M16 18h.01" />
    </svg>
    </:item>
    <:item label="Messages" navigate="/messages" value={Messages}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-mails"
      aria-hidden="true"
    >
      <rect width="16" height="13" x="6" y="4" rx="2" /><path d="m22 7-7.1 3.78c-.57.3-1.23.3-1.8 0L6 7" /><path d="M2 8v11c0 1.1.9 2 2 2h14" />
    </svg>
    </:item>
  </.bottom_navigation>
</div>
Hidden labels
Open in playground 
<div style="inline-size: 100%">
  <.bottom_navigation label="Main" current_value={Profile} hide_labels>
    <:item label="Profile" navigate="/profile" value={Profile}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-user"
      aria-hidden="true"
    >
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle
        cx="12"
        cy="7"
        r="4"
      />
    </svg>
    </:item>
    <:item label="Appointments" navigate="/appointments" value={Appointments}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-calendar-days"
      aria-hidden="true"
    >
      <rect width="18" height="18" x="3" y="4" rx="2" ry="2" /><line
        x1="16"
        x2="16"
        y1="2"
        y2="6"
      /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /><path d="M8 14h.01" /><path d="M12 14h.01" /><path d="M16 14h.01" /><path d="M8 18h.01" /><path d="M12 18h.01" /><path d="M16 18h.01" />
    </svg>
    </:item>
    <:item label="Messages" navigate="/messages" value={Messages}>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-mails"
      aria-hidden="true"
    >
      <rect width="16" height="13" x="6" y="4" rx="2" /><path d="m22 7-7.1 3.78c-.57.3-1.23.3-1.8 0L6 7" /><path d="M2 8v11c0 1.1.9 2 2 2h14" />
    </svg>
    </:item>
  </.bottom_navigation>
</div>