BottomNav

The BottomNav component allows navigation between primary pages. It's placed at the bottom of the screen like on a native mobile app. You can use the NavButton component to add child buttons.

Code Example

<BottomNav>
  <NavButton>Home</NavButton>
  <NavButton active>
    Shop
  </NavButton>
  <NavButton>Cart</NavButton>
</BottomNav>

Components

BottomNav consists of the following components:

BottomNav
NavButton

BottomNav

BottomNav holds NavButton components. It can be customized with the following props:

Prop	Type	Description
`size`	string	Sets the size to one of the below props.
`lg`	boolean	Sets the size to lg.
`md`	boolean	Sets the size to md.
`sm`	boolean	Sets the size to sm.
`xs`	boolean	Sets the size to xs.

NavButton

NavButton components go inside of BottomNav. They can be customized with the following props:

Prop	Type	Description
`active`	boolean	Sets the active state.
`disabled`	boolean	Sets the disabled state.

Size

There are two ways to set the size of the BottomNav:

The lg, md, sm, and xs boolean props.
The size prop, which accepts a string with any of the prop names, above.

Code Example

<BottomNav lg>
  <NavButton>Home</NavButton>
  <NavButton active>
    Shop
  </NavButton>
  <NavButton>Cart</NavButton>
</BottomNav>

With Icons

This example uses icons from unplugin-icons. The icons are from the feathericons icon pack.

Code Example

<BottomNav>
  <NavButton>
    <Icon name="feather:home" />
  </NavButton>
  <NavButton active>
    <Icon name="feather:shopping-bag" />
  </NavButton>
  <NavButton>
    <Icon name="feather:shopping-cart" />
  </NavButton>
</BottomNav>

With Color

Use text- utility classes on BottomNav to give all elements the same color.

Code Example

<BottomNav class="text-primary">
  <NavButton>
    <Icon name="feather:home" />
  </NavButton>
  <NavButton active>
    <Icon name="feather:shopping-bag" />
  </NavButton>
  <NavButton>
    <Icon name="feather:shopping-cart" />
  </NavButton>
</BottomNav>

With Individual Colors

Each button can have its own unique colors.

Code Example

<BottomNav>
  <NavButton class="text-primary">
    <Icon name="feather:home" />
  </NavButton>
  <NavButton active class="text-secondary">
    <Icon name="feather:shopping-bag" />
  </NavButton>
  <NavButton class="text-accent">
    <Icon name="feather:shopping-cart" />
  </NavButton>
</BottomNav>

Disabled Items

Cart has been disabled in this example:

Code Example

<BottomNav class="absolute">
  <NavButton>Home</NavButton>
  <NavButton active>
    Shop
  </NavButton>
  <NavButton disabled>Cart</NavButton>
</BottomNav>

Prev Breadcrumbs

Next Link