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
Loading...
<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="mb-8 mt-16" />
<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/SearchOutline.svelte";
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:outline-none focus:ring-4 focus:ring-gray-200 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="ms-2 inline h-6 w-6 text-primary-800 dark:text-white" />
</NavLi>
<div class="relative">
<Dropdown {dropdownStatus} {closeDropdown} class="absolute -top-[20px] left-[100px] md:-left-[170px] md:top-[20px]">
<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 -left-[110px] top-[14px] 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>