Doggo Storybook 0.10.2

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.

 Read more Read less
[]

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

 Read more Read less

current LiveView module, or the live action.
hide_labels :boolean

Hides the labels of the individual navigation items.

 Read more Read less
false
label :string

Label for the <nav> element. The label is especially important if you have

 Read more Read less

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.
Show slot attributes Hide slot attributes
label :string

Required label for the navigation items. The item labels can be visually hidden with the hide_labels attribute on the component.
href :string

Passed to Phoenix.Component.link/1.
navigate :string

Passed to Phoenix.Component.link/1.
patch :string

Passed to Phoenix.Component.link/1.
value :any

The value of the item is compared to the current_value attribute to determine whether to add the aria-current attribute. This can be a single value or a list of values, e.g. multiple live actions for which the item should be marked as current.

 
<: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>