Component

Vue Mobile Navigation Bar

<DomAppTopBar>

A compact app navigation bar with optional leading and trailing actions.

Playground

Try every prop live

App top bar playground

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

App top bar playground

DOM Studio Phone

Workspace

Capacitor app

Preview

Mobile content area

Playground.vuevue

Install

npm install @getdom/studio

vue

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

const data = reactive({
		"title": "Workspace",
		"subtitle": "Capacitor app",
		"border": true,
		"large": false
	});
</script>

<template>
	<DomAppTopBar
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`title`	string	string	''	Primary title shown in the app bar.
`subtitle`	string	string	''	Optional supporting text below the title.
`border`	boolean	boolean	true	Show a bottom divider.
`large`	boolean	boolean	false	Use larger title sizing and padding.

Auto-generated from App top bar.props and inline _edit hints.

Slots

Name	Scope	Description
#leading	—	Leading icon button or back control.
#trailing	—	Trailing actions.