Component

Vue Mobile Bottom Navigation

<DomAppBottomNav>

A thumb-friendly bottom navigation bar for primary app destinations.

Playground

Try every prop live

App bottom nav playground

Adjust the props to explore sizing, content, and behaviour.

App bottom nav playground

DOM Studio Phone

Preview

Mobile content area

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAppBottomNav } from '@getdom/studio';

const data = reactive({
		"modelValue": "home",
		"items": [
			{
				"value": "home",
				"label": "Home",
				"badge": ""
			},
			{
				"value": "inbox",
				"label": "Inbox",
				"badge": "3"
			},
			{
				"value": "settings",
				"label": "Settings",
				"badge": ""
			}
		]
	});
</script>

<template>
	<DomAppBottomNav
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	string	string	''	Currently selected navigation item value.
`items`	array	Array<unknown>	[]	Navigation items: { value, label, icon, iconPath, badge }.

Auto-generated from App bottom nav.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	string	Fired when a tab is selected.
@change	object	Fired with the selected tab item.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.