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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Wallet">
<WalletSolid
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalSolid
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Wallet">
<WalletFlowbite
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalFlowbite
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleFlowbite
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-5 w-5 text-gray-500 dark:text-gray-400"
/>
</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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#home">Home</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Wallet" appBtnPosition="middle">
<WalletSolid
id="wallet"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#settings">Settings</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Profile" appBtnPosition="right">
<UserCircleSolid
id="profile"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#create">New document</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Bookmark">
<BookmarkSolid
id="bookmark"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<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:ring-2 focus:ring-gray-200 focus:outline-none 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:ring-2 focus:ring-gray-200 focus:outline-none 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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#settings">Settings</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid
id="profile"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#home">Home</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Bookmark">
<BookmarkSolid
id="bookmark"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#bookmark">Bookmark</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="New post">
<PlusOutline
id="create"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#create">New post</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Search">
<SearchOutline
id="search"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<Tooltip arrow={false} triggeredBy="#search">Search</Tooltip>
</BottomNavItem>
<BottomNavItem btnName="Settings">
<AdjustmentsVerticalOutline
id="settings"
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
<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-primary-600 dark:text-primary-500 text-xs"
>{@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="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Following">
<UsersGroupOutline
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
<BottomNavItem btnName="Favorites">
<StarSolid
class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400"
/>
</BottomNavItem>
</BottomNav>
</Card>
</div>