Vue
NavbarBottom
NavbarBottom block is the navigation element used in mobile view.
NavbarBottom with white background
<template>
<nav class="max-w-[500px] bottom-0 w-full left-0 fixed flex flex-row items-stretch bg-white text-primary-700">
<SfButton
v-for="item in items"
:key="item.label"
variant="tertiary"
:class="[
'py-1 flex flex-col h-full w-full rounded-none hover:text-primary-800 hover:bg-primary-100 active:text-primary-900 active:bg-primary-200',
{ 'text-primary-900 bg-primary-200': selectedItem === item.label },
]"
@click="onClickHandler(item.label)"
>
<template #prefix>
<Component :is="item.icon" />
</template>
{{ item.label }}
</SfButton>
</nav>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SfButton, SfIconHome, SfIconMenu, SfIconSearch, SfIconShoppingCart, SfIconFavorite } from '@storefront-ui/vue';
const items = [
{
label: 'Home',
icon: SfIconHome,
},
{
label: 'Products',
icon: SfIconMenu,
},
{
label: 'Search',
icon: SfIconSearch,
},
{
label: 'Cart',
icon: SfIconShoppingCart,
},
{
label: 'Wishlist',
icon: SfIconFavorite,
},
];
const selectedItem = ref('');
function onClickHandler(itemLabel: string) {
selectedItem.value = itemLabel;
}
</script>
NavbarBottom with filled background
<template>
<nav class="max-w-[500px] bottom-0 w-full left-0 fixed flex flex-row items-stretch">
<SfButton
v-for="item in items"
:key="item.label"
variant="tertiary"
:class="[
'py-1 flex flex-col h-full w-full rounded-none bg-primary-700 text-white hover:text-white hover:bg-primary-800 active:text-white active:bg-primary-900',
{ 'text-white bg-primary-900': selectedItem === item.label },
]"
@click="onClickHandler(item.label)"
>
<template #prefix>
<Component :is="item.icon" />
</template>
{{ item.label }}
</SfButton>
</nav>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SfButton, SfIconHome, SfIconMenu, SfIconSearch, SfIconShoppingCart, SfIconFavorite } from '@storefront-ui/vue';
const items = [
{
label: 'Home',
icon: SfIconHome,
},
{
label: 'Products',
icon: SfIconMenu,
},
{
label: 'Search',
icon: SfIconSearch,
},
{
label: 'Cart',
icon: SfIconShoppingCart,
},
{
label: 'Wishlist',
icon: SfIconFavorite,
},
];
const selectedItem = ref('');
function onClickHandler(itemLabel: string) {
selectedItem.value = itemLabel;
}
</script>