The phone tab bar: top-level destinations, the current one lit.

Phones only, fixed to the bottom of the screen: this site's own tab bar is one, narrow the window to see it. Leave about 8rem of bottom padding on the page so the last row isn't hidden behind it; the Fab sits right above it. Pass isActive when a destination owns paths outside its own href.

Usage

+layout.svelte 
<script lang="ts">
	import HouseIcon from "@lucide/svelte/icons/house";
	import UserRoundIcon from "@lucide/svelte/icons/user-round";
	import UsersIcon from "@lucide/svelte/icons/users";

	import BottomNav from "@orochibraru/ui/blocks/bottom-nav";

	const { children } = $props();

	const items = [
		{ href: "/", label: "Home", icon: HouseIcon },
		{ href: "/groups", label: "Groups", icon: UsersIcon },
		{ href: "/account", label: "Account", icon: UserRoundIcon },
	];
</script>

<main class="min-h-dvh pb-32 md:pb-10">
	{@render children()}
</main>
<BottomNav {items} />