Doggo Storybook 0.9.0

Bottom Navigation

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

Read more Read less

Usage

<.bottom_navigation current_value={@view}>
  <: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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
Required current_value * :any The current value used to compare the item values with. This could be the current LiveView module, or the live action.
hide_labels :boolean Hides the labels of the individual navigation items. false
label :string Label for the `<nav>` element. The label is especially important if you have multiple `<nav>` elements on the same page. If the page is localized, the label should be translated, too. Do not include "navigation" in the label, since screen readers will already announce the "navigation" role as part of the label.
rest :global Any additional HTML attributes.
Required item * :slot Slot for the navigation items. The inner content should be used to render an icon. 
<:item label="Profile" navigate="/profile" value={Profile}>
  <.icon><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"
>
  <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>
</.icon>
</:item>
<:item label="Appointments" navigate="/appointments" value={Appointments}>
  <.icon><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"
>
  <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>
</.icon>
</:item>
<:item label="Messages" navigate="/messages" value={Messages}>
  <.icon><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"
>
  <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>
</.icon>
</:item>