Bottom Navigation

Provide quick access to primary navigation items

Use the BottomNavigation component to display a fixed menu with primary navigation elements at the bottom of your pages. Being fixed, they remain visible during scrolling and help users easily reach cornerstone content on your website.

---
import { BottomNavigation } from 'webcoreui/astro'

const items = [
    {
        icon: 'home',
        name: 'Home'
    },
    {
        icon: 'components',
        name: 'Components'
    },
    {
        icon: 'github',
        name: 'GitHub'
    }
]
---

<BottomNavigation items={items} />

<script>
    import { BottomNavigation } from 'webcoreui/svelte'
    import { home, components, github } from 'webcoreui/icons'

    const items = [
        {
            icon: home,
            name: 'Home'
        },
        {
            icon: components,
            name: 'Components'
        },
        {
            icon: github,
            name: 'GitHub'
        }
    ]
</script>

<BottomNavigation items={items} />

import React from 'react'
import { BottomNavigation } from 'webcoreui/react'
import { home, components, github } from 'webcoreui/icons'

const items = [
    {
        icon: home,
        name: 'Home'
    },
    {
        icon: components,
        name: 'Components'
    },
    {
        icon: github,
        name: 'GitHub'
    }
]

const Component = () => (
    <BottomNavigation items={items} />
)

export default Component

The BottomNavigation component expects an items prop that describes the navigation items. Each navigation item can have the following properties:

• name: The name of the navigation item.
• href: The link of the navigation item.
• target: The target of the anchor, such as _blank for opening links in a new tab.
• icon: An icon for the navigation item. It can be an icon type for the Astro component, or an SVG string for Svelte/React components. For available icon types, please see the documentation of the Icon component.
• tooltip: You can optionally set a tooltip for the item in case you want to display icons only and you want to provide additional context to users.

All properties are optional, meaning you can create the navigation with text or icons only:

Tooltips

If you use icons only, you may want to provide additional context to users about your navigation items. For this, you can use the tooltip prop that adds a tooltip for the items:

---
import { BottomNavigation } from 'webcoreui/astro'

const items = [
    {
        icon: 'home',
        tooltip: 'Home'
    },
    {
        icon: 'components',
        tooltip: 'Components'
    },
    {
        icon: 'github',
        tooltip: 'GitHub'
    }
]
---

<BottomNavigation items={items} />

Styles

The component also supports two different stylings. Use the separated prop to add borders between elements, and use the floating prop to make the element rounded and padded around the viewport:

<BottomNavigation
    items={items}
    separated={true}
/>

<BottomNavigation
    items={items}
    floating={true}
/>

Max width

In its default configuration, the navigation items will equally take up the available space of the viewport:

If you want to limit this, you can use the maxWidth prop which sets a maximum width for the container of the items:

<BottomNavigation
    items={items}
    floating={true}
    maxWidth="400px"
/>

You can also set this option globally through overriding the following CSS variable:

html body {
    --w-bottom-navigation-max-width: 400px;
}

API

type BottomNavigationProps = {
    items: {
        name?: string
        href?: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
        icon?: string
        tooltip?: string
    }[]
    separated?: boolean
    floating?: boolean
    maxWidth?: string
    className?: string
}