App Bar

An Alixan UI navigation bar with compact and Silver variants.

Installation

npx alixan-ui-nuxt add app-bar

Compact

Dashboard

Page content

<script setup lang="ts">
import { Menu } from '@lucide/vue';

import AppBar from '@/components/ui/app-bar/AppBar.vue';
import Avatar from '@/components/ui/avatar/Avatar.vue';
import IconButton from '@/components/ui/button/IconButton.vue';
import Scaffold from '@/components/ui/scaffold/Scaffold.vue';
</script>

<template>
	<Scaffold>
		<template #app-bar>
			<AppBar title="appBar.dashboard">
				<template #leading>
					<IconButton>
						<Menu />
					</IconButton>
				</template>

				<template #trailing>
					<Avatar name="Alixan" />
				</template>
			</AppBar>
		</template>

		<template #body>
			<div class="h-90 mx-4 my-8 border rounded-2xl p-6 text-sm">
				Page content
			</div>
		</template>
	</Scaffold>
</template>

Silver

Use Silver when the page needs a prominent title that collapses into the App Bar while scrolling. Do not use the Silver App Bar on screens that include a Bottom Navigation Bar. Use Compact for those screens so both navigation levels remain clear.

Dashboard

Page content

<script setup lang="ts">
import { ArrowLeft, Ellipsis, Share } from '@lucide/vue';

import IconButton from '@/components/ui/button/IconButton.vue';
import Scaffold from '@/components/ui/scaffold/Scaffold.vue';
import SilverAppBar from '@/components/ui/app-bar/SilverAppBar.vue';
</script>

<template>
	<Scaffold>
		<template #body>
			<SilverAppBar title="appBar.dashboard">
				<template #leading>
					<IconButton>
						<ArrowLeft />
					</IconButton>
				</template>

				<template #trailing>
					<IconButton>
						<Share />
					</IconButton>

					<IconButton>
						<Ellipsis />
					</IconButton>
				</template>

				<template #observer>
					<h1 class="m-4 text-3xl font-semibold">
						{{ $t('appBar.dashboard') }}
					</h1>
				</template>
			</SilverAppBar>

			<div class="h-90 mx-4 my-8 border rounded-2xl p-6 text-sm">
				Page content
			</div>
		</template>
	</Scaffold>
</template>

API Reference

Prop	Type	Default	Description
title	string	-	The title displayed in the app bar.
titleAlign	'responsive' \| 'start' \| 'center'	'responsive'	Controls the title alignment. Responsive centers the title on smaller screens and aligns it to the start on larger screens.

Slots

Prop	Description
leading	Content displayed at the start of the app bar, such as a menu or back button.
trailing	Content displayed at the end of the app bar, such as actions or an avatar.
observer	Content observed by Silver App Bar. When it scrolls out of view, the compact title appears and the divider becomes visible.