Bottom navigation
Default
Loading...
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav position="absolute" innerClass="grid-cols-4">
<BottomNavItem btnName="Home">
<HomeSolid class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Wallet">
<WalletSolid class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalSolid class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
</BottomNav>
</div>
Animated icons
Loading...
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalFlowbite, HomeFlowbite, WalletFlowbite, UserCircleFlowbite } from "svelte-animated-icons";
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav position="absolute" innerClass="grid-cols-4">
<BottomNavItem btnName="Home">
<HomeFlowbite class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Wallet">
<WalletFlowbite class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalFlowbite class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleFlowbite class="mb-1 h-5 w-5 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
</BottomNav>
</div>
Link and active class
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
import { page } from "$app/stores";
let activeUrl = $state($page.url.pathname);
$effect(() => {
activeUrl = $page.url.pathname;
});
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4">
<BottomNavItem btnName="Home" href="/">
<HomeSolid />
</BottomNavItem>
<BottomNavItem btnName="Quickstart" href="/pages/about" target="_blank">
<WalletSolid />
</BottomNavItem>
<BottomNavItem btnName="BottomNav" href="/components/bottom-navigation">
<AdjustmentsVerticalSolid />
</BottomNavItem>
<BottomNavItem btnName="Accordion" href="/components/accordion">
<UserCircleSolid />
</BottomNavItem>
</BottomNav>
</div>
Overwriting active class
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
import { page } from "$app/stores";
let activeUrl = $state($page.url.pathname);
$effect(() => {
activeUrl = $page.url.pathname;
});
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4" activeClass="font-bold text-green-500 hover:text-green-900 dark:hover:text-green-700 dark:text-green-300">
<BottomNavItem btnName="Home" href="/">
<HomeSolid />
</BottomNavItem>
<BottomNavItem btnName="Quickstart" href="/pages/quickstart">
<WalletSolid />
</BottomNavItem>
<BottomNavItem btnName="BottomNav" href="/components/bottom-navigation">
<AdjustmentsVerticalSolid />
</BottomNavItem>
<BottomNavItem btnName="Accordion" href="/components/accordion">
<UserCircleSolid />
</BottomNavItem>
</BottomNav>
</div>
Icon color
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
let svgClass = "mb-1 text-pink-500 dark:text-pink-400 group-hover:text-pink-600 dark:group-hover:text-pink-500";
let svgActiveClass = "mb-1 text-green-500 dark:text-green-500 group-hover:text-green-700 dark:group-hover:text-green-700";
import { page } from "$app/stores";
let activeUrl = $state($page.url.pathname);
$effect(() => {
activeUrl = $page.url.pathname;
});
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4">
<BottomNavItem btnName="Home" href="/">
<HomeSolid class={activeUrl === "/" ? svgActiveClass : svgClass} />
</BottomNavItem>
<BottomNavItem btnName="Quickstart" href="/docs/pages/quickstart">
<WalletSolid class={activeUrl === "/docs/pages/quickstart" ? svgActiveClass : svgClass} />
</BottomNavItem>
<BottomNavItem btnName="BottomNav" href="/docs/components/bottom-navigation">
<AdjustmentsVerticalSolid class={activeUrl === "/docs/components/bottom-navigation" ? svgActiveClass : svgClass} />
</BottomNavItem>
<BottomNavItem btnName="Accordion" href="/docs/components/accordion">
<UserCircleSolid class={activeUrl === "/docs/components/accordion" ? svgActiveClass : svgClass} />
</BottomNavItem>
</BottomNav>
</div>
Border
Loading...
<script lang="ts">
import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from 'svelte-5-ui-lib';
import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav position="absolute" navType="border" innerClass="grid-cols-4">
<BottomNavItem btnName="Home">
<HomeSolid />
</BottomNavItem>
<BottomNavItem btnName="Wallet">
<WalletSolid />
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalSolid />
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid />
</BottomNavItem>
</BottomNav>
</div>
Application bar
Loading...
<script>
import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder, Tooltip } from 'svelte-5-ui-lib';
import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid, PlusOutline } from "flowbite-svelte-icons";
import { page } from "$app/stores";
let activeUrl = $state($page.url.pathname);
$effect(() => {
activeUrl = $page.url.pathname;
});
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav {activeUrl} position="absolute" navType="application" innerClass="grid-cols-5">
<BottomNavItem btnName="Home" appBtnPosition="left" btnClass="static">
<HomeSolid id="home" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#home">Home</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Wallet" appBtnPosition="middle">
<WalletSolid id="wallet" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#wallet">Wallet</Tooltip>
</BottomNavItem>
<div class="flex items-center justify-center">
<BottomNavItem btnName="Create new item" appBtnPosition="middle" btnClass="inline-flex items-center justify-center w-10 h-10 font-medium bg-primary-600 rounded-full hover:bg-primary-700 group focus:ring-4 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-800">
<PlusOutline id="create" class="text-white" />
<Tooltip arrow={false} triggeredBy="#create">Create new item</Tooltip>
</BottomNavItem>
</div>
<BottomNavItem btnName="Settings" appBtnPosition="middle">
<AdjustmentsVerticalOutline id="settings" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#settings">Settings</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Profile" appBtnPosition="right">
<UserCircleSolid id="profile" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#profile">Profile</Tooltip>
</BottomNavItem>
</BottomNav>
</div>
Pagination
Loading...
1 of 345
<script>
import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder, Tooltip } from 'svelte-5-ui-lib';
import { FileCirclePlusOutline, BookmarkSolid, AngleLeftOutline, AngleRightOutline, AdjustmentsVerticalOutline, UserCircleSolid } from "flowbite-svelte-icons";
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-20" />
<BottomNav position="absolute" navType="pagination" innerClass="grid-cols-6">
<BottomNavItem btnName="New document">
<FileCirclePlusOutline id="create" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#create">New document</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Bookmark">
<BookmarkSolid id="bookmark" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#bookmark">Bookmark</Tooltip>
</BottomNavItem>
<div class="col-span-2 flex items-center justify-center">
<div class="mx-2 flex w-full max-w-[128px] items-center justify-between rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-600 dark:text-gray-400">
<button type="button" class="inline-flex h-8 items-center justify-center rounded-s-lg bg-gray-100 px-1 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-600 dark:hover:bg-gray-800 dark:focus:ring-gray-800">
<AngleLeftOutline class="ms-1 h-2 w-2" />
<span class="sr-only">Previous page</span>
</button>
<span class="mx-1 flex-shrink-0 text-sm font-medium">1 of 345</span>
<button type="button" class="inline-flex h-8 items-center justify-center rounded-e-lg bg-gray-100 px-1 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-600 dark:hover:bg-gray-800 dark:focus:ring-gray-800">
<AngleRightOutline class="me-1 h-2 w-2" />
<span class="sr-only">Next page</span>
</button>
</div>
</div>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalOutline id="settings" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#settings">Settings</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid id="profile" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#profile">Profile</Tooltip>
</BottomNavItem>
</BottomNav>
</div>
Button group
Loading...
<script>
import { BottomNav, BottomNavItem, BottomNavHeader, BottomNavHeaderItem, Skeleton, ImagePlaceholder, Tooltip } from 'svelte-5-ui-lib';
import { HomeSolid, BookmarkSolid, PlusOutline, SearchOutline, AdjustmentsVerticalOutline } from "flowbite-svelte-icons";
</script>
<div class="relative flex flex-col p-6">
<Skeleton class="py-4" />
<ImagePlaceholder class="pb-28" />
<BottomNav position="absolute" navType="group" innerClass="grid-cols-5">
{#snippet header()}
<BottomNavHeader>
<BottomNavHeaderItem itemName="New" />
<BottomNavHeaderItem itemName="Popular" active={true} />
<BottomNavHeaderItem itemName="Following" />
</BottomNavHeader>
{/snippet}
<BottomNavItem btnName="Home">
<HomeSolid id="home" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#home">Home</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Bookmark">
<BookmarkSolid id="bookmark" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#bookmark">Bookmark</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="New post">
<PlusOutline id="create" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#create">New post</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Search">
<SearchOutline id="search" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#search">Search</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalOutline id="settings" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
<Tooltip arrow={false} triggeredBy="#settings">Settings</Tooltip>
</BottomNavItem>
</BottomNav>
</div>
Card
New message from Jese Leos: "Hey, what's up? All set for the presentation?"
a few moments ago
Joseph McFall and 5 others started following you.
10 minutes ago
Bonnie Green and 141 others love your story. See it and view more stories.
23 minutes ago
Leslie Livingston mentioned you in a comment: @bonnie.green what do you say?
23 minutes ago
Robert Brown posted a new video: Glassmorphism - learn how to implement the new design trend.
23 minutes ago<script lang="ts">
import { BottomNav, BottomNavItem, Card, Listgroup, Avatar } from 'svelte-5-ui-lib';
import { ClockSolid, UsersGroupOutline, StarSolid } from "flowbite-svelte-icons";
interface ListType {
img: { src: string; alt: string };
comment: string;
message: string;
}
let list: ListType[] = [
{
img: { src: "/images/profile-picture-1.webp", alt: "Neil Sims" },
comment: 'New message from <span class="font-medium text-gray-900 dark:text-white">Jese Leos</span>: "Hey, what\'s up? All set for the presentation?"',
message: "a few moments ago"
},
{
img: { src: "/images/profile-picture-2.webp", alt: "Bonnie Green" },
comment: 'Joseph McFall and <span class="font-medium text-gray-900 dark:text-white">5 others</span> started following you.',
message: "10 minutes ago"
},
{
img: { src: "/images/profile-picture-3.webp", alt: "Leslie Livingston" },
comment: 'Bonnie Green and <span class="font-medium text-gray-900 dark:text-white">141 others</span> love your story. See it and view more stories.',
message: "23 minutes ago"
},
{
img: { src: "/images/profile-picture-4.webp", alt: "Robert Brown" },
comment: 'Leslie Livingston mentioned you in a comment: <span class="font-medium text-primary-600 dark:text-primary-500 hover:underline">@bonnie.green</span> what do you say?',
message: "23 minutes ago"
},
{
img: { src: "/images/profile-picture-5.webp", alt: "Michael Gough" },
comment: "Robert Brown</span> posted a new video: Glassmorphism - learn how to implement the new design trend.",
message: "23 minutes ago"
}
];
</script>
<div class="flex justify-center">
<Card class="relative h-96 overflow-y-scroll rounded-lg border border-gray-100 bg-white dark:border-gray-600 dark:bg-gray-700" contentClass="p-0 sm:p-0 md:p-0">
<Listgroup class="border-0 dark:!bg-transparent">
{#snippet children()}
{#each list as item}
<a href="/" class="flex w-full items-center justify-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<Avatar src={item.img.src} alt={item.img.alt} class="me-3 flex-shrink-0" />
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">{@html item.comment}</p>
<span class="text-xs text-primary-600 dark:text-primary-500">{@html item.message}</span>
</div>
</a>
{/each}
{/snippet}
</Listgroup>
<BottomNav position="sticky" navType="card" innerClass="grid-cols-3 pt-2 pb-4">
<BottomNavItem btnName="Latest">
<ClockSolid class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Following">
<UsersGroupOutline class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
<BottomNavItem btnName="Favorites">
<StarSolid class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
</BottomNavItem>
</BottomNav>
</Card>
</div>