- 1.4.1

Bottom Navigation

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

Read more Read less

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

 Read more Read less

have multiple <nav> elements on the same page. If the page is localized, the label should be translated, too.

Do not repeat the word navigation in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this navigation.

 Read more Read less

Set either this attribute or 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
Required label * :string

Label for the navigation item. 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.
Required 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}>
  <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>

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