Navbar

Default

<script lang="ts">
	import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="md">
	{#snippet brand()}
		<NavBrand siteName="Svelte 5">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}

	<NavUl {activeUrl}>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

Breakpoint

<script lang="ts">
	import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="lg">
	{#snippet brand()}
		<NavBrand siteName="Svelte 5">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}

	<NavUl {activeUrl}>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

Cta button

<script lang="ts">
	import { Navbar, NavBrand, NavUl, NavLi, uiHelpers, Button, NavHamburger } from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<Navbar {navStatus} breakPoint="md" hamburgerMenu={false}>
	{#snippet brand()}
		<NavBrand siteName="Svelte 5 UI Lib">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}
	{#snippet navSlotBlock()}
		<div class="flex items-center space-x-1 md:order-2">
			<Button size="sm">Get started</Button>
			<NavHamburger {toggleNav} />
		</div>
	{/snippet}
	<NavUl class="order-1" {activeUrl}>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

Sticky

<script lang="ts">
	import {
		Navbar,
		NavBrand,
		NavUl,
		NavLi,
		Skeleton,
		ImagePlaceholder,
		TextPlaceholder,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<div class="relative">
	<Navbar
		{toggleNav}
		{closeNav}
		{navStatus}
		breakPoint="md"
		navClass="absolute w-full z-20 top-0 start-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700"
	>
		{#snippet brand()}
			<NavBrand siteName="Svelte 5">
				<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
			</NavBrand>
		{/snippet}

		<NavUl {activeUrl}>
			<NavLi href="/">Home</NavLi>
			<NavLi href="/components/navbar">Navbar</NavLi>
			<NavLi href="/components/footer">Footer</NavLi>
		</NavUl>
	</Navbar>
	<div style="height:300px;" class="overflow-auto px-8 py-24">
		<Skeleton class="mt-16 mb-8" />
		<ImagePlaceholder class="my-8" />
		<TextPlaceholder class="my-8" />
	</div>
</div>

Search navbar

<script lang="ts">
	import { Navbar, NavBrand, NavUl, NavLi, uiHelpers, Button, NavHamburger, Input } from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	import { SearchOutline } from 'flowbite-svelte-icons';

	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<Navbar {navStatus} breakPoint="lg" hamburgerMenu={false}>
	{#snippet brand()}
		<NavBrand siteName="Svelte 5 UI Lib">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}
	{#snippet navSlotBlock()}
		<div class="flex items-center space-x-1 md:order-2">
			<Button
				class="me-1 rounded-lg bg-white p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 focus:outline-none md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
			>
				<SearchOutline class="h-5 w-5" />
			</Button>
			<div class="relative hidden md:block">
				<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
					<SearchOutline class="h-4 w-4" />
				</div>
				<Input id="search-navbar" class="bg-transparent ps-10" placeholder="Search..." />
			</div>
			<NavHamburger {toggleNav} />
		</div>
	{/snippet}
	<NavUl class="order-1" {activeUrl}>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

Dropdown

<script lang="ts">
	import {
		Navbar,
		NavBrand,
		NavUl,
		NavLi,
		uiHelpers,
		Dropdown,
		DropdownUl,
		DropdownLi
	} from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	// for navbar
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	// for Dropdown
	let dropdown = uiHelpers();
	let dropdownStatus = $state(false);
	let closeDropdown = dropdown.close;
	$effect(() => {
		navStatus = nav.isOpen;
		dropdownStatus = dropdown.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<div class="h-64">
	<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="md">
		{#snippet brand()}
			<NavBrand siteName="Svelte 5">
				<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
			</NavBrand>
		{/snippet}

		<NavUl {activeUrl}>
			<NavLi href="/">Home</NavLi>
			<NavLi href="/components/navbar">Navbar</NavLi>
			<NavLi onclick={dropdown.toggle} class="cursor-pointer">
				Dropdown<ChevronDownOutline class="text-primary-800 ms-2 inline h-6 w-6 dark:text-white" />
			</NavLi>
			<div class="relative">
				<Dropdown
					{dropdownStatus}
					{closeDropdown}
					class="absolute -top-[20px] left-[100px] md:top-[20px] md:-left-[170px]"
				>
					<DropdownUl>
						<DropdownLi href="/components/alert">Alert</DropdownLi>
						<DropdownLi href="/components/button">Button</DropdownLi>
						<DropdownLi href="/components/drawer">Drawer</DropdownLi>
					</DropdownUl>
				</Dropdown>
			</div>
			<NavLi href="/components/footer">Footer</NavLi>
		</NavUl>
	</Navbar>
</div>

Background color

<script lang="ts">
	import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	$effect(() => {
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<Navbar {toggleNav} {closeNav} {navStatus} breakPoint="md" navClass="bg-gray-100 rounded-xl">
	{#snippet brand()}
		<NavBrand siteName="Svelte 5">
			<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
		</NavBrand>
	{/snippet}

	<NavUl {activeUrl}>
		<NavLi href="/">Home</NavLi>
		<NavLi href="/components/navbar">Navbar</NavLi>
		<NavLi href="/components/footer">Footer</NavLi>
	</NavUl>
</Navbar>

User dropdown

<script lang="ts">
	import {
		Navbar,
		NavBrand,
		NavUl,
		NavLi,
		uiHelpers,
		NavHamburger,
		Dropdown,
		DropdownHeader,
		DropdownUl,
		DropdownLi,
		Avatar,
		DropdownFooter
	} from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	import { sineIn } from 'svelte/easing';
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let dropdownUser = uiHelpers();
	let dropdownUserStatus = $state(false);
	let closeDropdownUser = dropdownUser.close;
	$effect(() => {
		dropdownUserStatus = dropdownUser.isOpen;
		navStatus = nav.isOpen;
		activeUrl = $page.url.pathname;
	});
</script>

<div class="h-80">
	<Navbar {navStatus} hamburgerMenu={false}>
		{#snippet brand()}
			<NavBrand siteName="Svelte 5 UI Lib">
				<img width="30" src="/images/svelte-icon.png" alt="svelte icon" />
			</NavBrand>
		{/snippet}
		{#snippet navSlotBlock()}
			<div class="flex items-center space-x-1 md:order-2">
				<Avatar
					onclick={dropdownUser.toggle}
					src="/images/profile-picture-3.webp"
					dot={{ color: 'green' }}
				/>
				<div class="relative">
					<Dropdown
						dropdownStatus={dropdownUserStatus}
						closeDropdown={closeDropdownUser}
						params={{ y: 0, duration: 200, easing: sineIn }}
						class="absolute top-[14px] -left-[110px] md:-left-[160px] "
					>
						<DropdownHeader class="px-4 py-2">
							<span class="block text-sm text-gray-900 dark:text-white">Bonnie Green</span>
							<span class="block truncate text-sm font-medium">name@flowbite.com</span>
						</DropdownHeader>
						<DropdownUl>
							<DropdownLi href="/">Dashboard</DropdownLi>
							<DropdownLi href="/components/drawer">Drawer</DropdownLi>
							<DropdownLi href="/components/footer">Footer</DropdownLi>
							<DropdownLi href="/components">Alert</DropdownLi>
						</DropdownUl>
						<DropdownFooter class="px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
							>Sign out</DropdownFooter
						>
					</Dropdown>
				</div>
				<NavHamburger {toggleNav} />
			</div>
		{/snippet}
		<NavUl class="order-1" {activeUrl}>
			<NavLi href="/">Home</NavLi>
			<NavLi href="/components/navbar">Navbar</NavLi>
			<NavLi href="/components/footer">Footer</NavLi>
		</NavUl>
	</Navbar>
</div>

Navbar

Default

Breakpoint

Cta button

Sticky

Search navbar

Dropdown

Background color

User dropdown

Component data