svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Dropdown

Setup

<script lang="ts">
	import {
		Button,
		Dropdown,
		DropdownDivider,
		DropdownHeader,
		DropdownFooter,
		DropdownUl,
		DropdownLi,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	import { blur, fly, slide, scale } from 'svelte/transition';
	import { sineIn, linear } from 'svelte/easing';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});

	let transitionParams = {
		y: 0,
		duration: 200,
		easing: sineIn
	};

	let dropdownA = uiHelpers();
	let dropdownAStatus = $state(false);
	let closeDropdownA = dropdownA.close;

	$effect(() => {
		dropdownAStatus = dropdownA.isOpen;
	});
</script>

Interactive Dropdown Builder

<div class="flex items-start justify-center">
  <Button onclick={dropdownA.toggle}>Dropdown
    <ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
  </Button>
  <div class="relative h-96">
    <Dropdown {activeUrl} dropdownStatus={dropdownAStatus} closeDropdown={closeDropdownA} class="absolute -left-[150px] top-[40px]">
      <DropdownUl>
        <DropdownLi href="/">Dashboard</DropdownLi>
        <DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
      </DropdownUl>
    </Dropdown>
  </div>
</div>

Active link

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownB = uiHelpers();
	let dropdownBStatus = $state(false);
	let closeDropdownB = dropdownB.close;
	$effect(() => {
		dropdownBStatus = dropdownB.isOpen;
	});
</script>

<div class="flex h-48 items-start justify-center">
	<Button onclick={dropdownB.toggle}>
		Dropdown
		<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
	</Button>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownBStatus}
			closeDropdown={closeDropdownB}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[150px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components/footer">Footer</DropdownLi>
				<DropdownLi href="/components/alert">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Avatar with name

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Button,
		Dropdown,
		DropdownHeader,
		DropdownFooter,
		DropdownUl,
		DropdownLi,
		uiHelpers,
		Avatar
	} from 'svelte-5-ui-lib';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownAvatar = uiHelpers();
	let dropdownAvatarStatus = $state(false);
	let closeDropdownAvatar = dropdownAvatar.close;
	$effect(() => {
		dropdownAvatarStatus = dropdownAvatar.isOpen;
	});
</script>

<div class="flex h-80 items-start justify-center">
	<Button onclick={dropdownAvatar.toggle} pill color="light" class="!p-1">
		<Avatar src="/images/profile-picture-3.webp" class="me-2" />
		Bonnie Green
	</Button>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownAvatarStatus}
			closeDropdown={closeDropdownAvatar}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[50px] -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/dropdown">Dropdown</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>
</div>

Checkbox

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers, Checkbox } from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	let dropdownCheckbox = uiHelpers();
	let dropdownCheckboxStatus = $state(false);
	let closeDropdownCheckbox = dropdownCheckbox.close;
	$effect(() => {
		dropdownCheckboxStatus = dropdownCheckbox.isOpen;
	});
</script>

<div class="flex h-72 items-start justify-center">
	<Button onclick={dropdownCheckbox.toggle}
		>Dropdown checkbox<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownCheckboxStatus}
			closeDropdown={closeDropdownCheckbox}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[45px] -left-[195px]"
		>
			<DropdownUl>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Robert Gouth</Checkbox>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Jese Leos</Checkbox>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox checked>Bonnie Green</Checkbox>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Jese Leos</Checkbox>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Robert Gouth</Checkbox>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Bonnie Green</Checkbox>
				</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Helper text

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers, Checkbox, Helper } from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	let dropdownHelper = uiHelpers();
	let dropdownHelperStatus = $state(false);
	let closeDropdownHelper = dropdownHelper.close;
	$effect(() => {
		dropdownHelperStatus = dropdownHelper.isOpen;
	});
</script>

<div class="relative flex h-72 items-start justify-center">
	<Button onclick={dropdownHelper.toggle}
		>Dropdown helper text<ChevronDownOutline
			class="ms-2 h-6 w-6 text-white dark:text-white"
		/></Button
	>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownHelperStatus}
			closeDropdown={closeDropdownHelper}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[45px] -left-[240px] w-64 overflow-y-auto p-2 pb-3 text-sm"
		>
			<DropdownUl>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Enable notifications</Checkbox>
					<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox>Enable 2FA auth</Checkbox>
					<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Checkbox checked>Subscribe newsletter</Checkbox>
					<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
				</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Menu icon

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { DotsVerticalOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownIcon = uiHelpers();
	let dropdownIconStatus = $state(false);
	let closeDropdownIcon = dropdownIcon.close;
	$effect(() => {
		dropdownIconStatus = dropdownIcon.isOpen;
	});
</script>

<div class="flex h-40 items-start justify-center">
	<DotsVerticalOutline onclick={dropdownIcon.toggle} class="dots-menu dark:text-white" />
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownIconStatus}
			closeDropdown={closeDropdownIcon}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[20px] -left-[90px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Multi level

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronDownOutline, ChevronRightOutline } from 'flowbite-svelte-icons';
	let dropdownMultiLevel = uiHelpers();
	let dropdownMultiLevelStatus = $state(false);
	let closeDropdownMultiLevel = dropdownMultiLevel.close;
	let dropdownMultiLevel2 = uiHelpers();
	let dropdownMultiLevelStatus2 = $state(false);
	const closeAllMultilevel = () => {
		dropdownMultiLevel.close();
		dropdownMultiLevel2.close();
	};
	$effect(() => {
		dropdownMultiLevelStatus = dropdownMultiLevel.isOpen;
		dropdownMultiLevelStatus2 = dropdownMultiLevel2.isOpen;
	});
</script>

<div class="flex h-60 items-start justify-center">
	<Button onclick={dropdownMultiLevel.toggle}>
		Dropdown
		<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
	</Button>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownMultiLevelStatus}
			closeDropdown={closeDropdownMultiLevel}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[150px] overflow-visible"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<button onclick={dropdownMultiLevel2.toggle} class="flex p-2 pl-4"
					>Dropdown<ChevronRightOutline
						class="text-primary-700 ms-2 h-6 w-6 dark:text-white"
					/></button
				>
				<div class="relative">
					<Dropdown
						dropdownStatus={dropdownMultiLevelStatus2}
						closeDropdown={closeAllMultilevel}
						params={{ y: 0, duration: 200, easing: sineIn }}
						class="absolute -top-[60px] left-[120px]"
					>
						<DropdownUl class="z-100">
							<DropdownLi href="/">Home</DropdownLi>
							<DropdownLi href="/components/footer">Footer</DropdownLi>
							<DropdownLi href="/components/alert">Alert</DropdownLi>
						</DropdownUl>
					</Dropdown>
				</div>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/footer">Footer</DropdownLi>
				<DropdownLi href="/components/button">Button</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Navbar

svelte icon Svelte 5
  • Home
  • Navbar
  • Dropdown
  • Footer
<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Dropdown,
		DropdownUl,
		DropdownLi,
		DropdownDivider,
		uiHelpers,
		Navbar,
		NavBrand,
		NavUl,
		NavLi
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	let nav = uiHelpers();
	let navStatus = $state(false);
	let toggleNav = nav.toggle;
	let closeNav = nav.close;
	let dropdownNav = uiHelpers();
	let dropdownNavStatus = $state(false);
	let closeDropdownNav = dropdownNav.close;
	$effect(() => {
		dropdownNavStatus = dropdownNav.isOpen;
		navStatus = nav.isOpen;
	});
</script>

<div class="h-72">
	<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>
			<NavLi href="/">Home</NavLi>
			<NavLi href="/components/navbar">Navbar</NavLi>
			<div class="relative">
				<NavLi onclick={dropdownNav.toggle} class="cursor-pointer">
					Dropdown<ChevronDownOutline
						class="text-primary-800 ms-2 inline h-6 w-6 dark:text-white"
					/>
				</NavLi>
				<Dropdown
					dropdownStatus={dropdownNavStatus}
					closeDropdown={closeDropdownNav}
					params={{ y: 0, duration: 200, easing: sineIn }}
					class="absolute -top-[20px] left-[120px] md:top-[20px] md:-left-[20px]"
				>
					<DropdownUl class="p-2">
						<DropdownLi href="/">Home</DropdownLi>
						<DropdownDivider />
						<DropdownLi href="/components/drawer">Drawer</DropdownLi>
						<DropdownLi href="/components/footer">Footer</DropdownLi>
						<DropdownLi href="/components/alert">Alert</DropdownLi>
					</DropdownUl>
				</Dropdown>
			</div>
			<NavLi href="/components/footer">Footer</NavLi>
		</NavUl>
	</Navbar>
</div>

Notifictiaon bell

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Dropdown,
		DropdownUl,
		DropdownLi,
		DropdownHeader,
		DropdownFooter,
		Avatar,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { BellSolid, EyeSolid } from 'flowbite-svelte-icons';
	let dropdownNotification = uiHelpers();
	let dropdownNotificationStatus = $state(false);
	let closeDropdownNotification = dropdownNotification.close;
	$effect(() => {
		dropdownNotificationStatus = dropdownNotification.isOpen;
	});
</script>

<div class="flex h-[360px] items-start justify-center">
	<div
		id="bell"
		class="inline-flex items-center text-center text-sm font-medium text-gray-500 hover:text-gray-900 focus:outline-none dark:text-gray-400 dark:hover:text-white"
	>
		<BellSolid class="h-8 w-8" onclick={dropdownNotification.toggle} />
		<div class="relative flex">
			<div
				class="relative end-4 -top-2 inline-flex h-3 w-3 rounded-full border-2 border-white bg-red-500 dark:border-gray-900"
			></div>
		</div>
	</div>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownNotificationStatus}
			closeDropdown={closeDropdownNotification}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[30px] -left-[230px] w-96"
		>
			<DropdownHeader class="py-2 text-center font-bold">Notifications</DropdownHeader>
			<DropdownUl
				class="max-w-sm space-y-2 divide-y divide-gray-100 rounded p-2 shadow dark:divide-gray-700 dark:bg-gray-800"
			>
				<DropdownLi
					liClass="flex space-x-4 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-600"
				>
					<Avatar
						src="/images/profile-picture-1.webp"
						dot={{ color: 'gray' }}
						cornerStyle="rounded"
					/>
					<div class="w-full ps-3">
						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
							New message from <span class="font-semibold text-gray-900 dark:text-white"
								>Jese Leos</span
							>
							: "Hey, what's up? All set for the presentation?"
						</div>
						<div class="text-primary-600 dark:text-primary-500 text-xs">a few moments ago</div>
					</div>
				</DropdownLi>
				<DropdownLi
					liClass="flex space-x-4 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-600"
				>
					<Avatar
						src="/images/profile-picture-2.webp"
						dot={{ color: 'red' }}
						cornerStyle="rounded"
					/>
					<div class="w-full ps-3">
						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
							<span class="font-semibold text-gray-900 dark:text-white">Joseph Mcfall</span>
							and
							<span class="font-medium text-gray-900 dark:text-white">5 others</span>
							started following you.
						</div>
						<div class="text-primary-600 dark:text-primary-500 text-xs">10 minutes ago</div>
					</div>
				</DropdownLi>
				<DropdownLi
					liClass="flex space-x-4 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-600"
				>
					<Avatar
						src="/images/profile-picture-3.webp"
						dot={{ color: 'green' }}
						cornerStyle="rounded"
					/>
					<div class="w-full ps-3">
						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
							<span class="font-semibold text-gray-900 dark:text-white">Bonnie Green</span>
							and
							<span class="font-medium text-gray-900 dark:text-white">141 others</span>
							love your story. See it and view more stories.
						</div>
						<div class="text-primary-600 dark:text-primary-500 text-xs">44 minutes ago</div>
					</div>
				</DropdownLi>
			</DropdownUl>
			<DropdownFooter
				class="-my-1 block bg-gray-50 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
			>
				<div class="inline-flex items-center">
					<EyeSolid class="me-2 h-4 w-4 text-gray-500 dark:text-gray-400" />
					View all
				</div>
			</DropdownFooter>
		</Dropdown>
	</div>
</div>

Placement bottom

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownBottom = uiHelpers();
	let dropdownBottomStatus = $state(false);
	let closeDropdownBottom = dropdownBottom.close;
	$effect(() => {
		dropdownBottomStatus = dropdownBottom.isOpen;
	});
</script>

<div class="flex h-[360px] items-start justify-center">
	<Button onclick={dropdownBottom.toggle}
		>Dropdown bottom<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownBottomStatus}
			closeDropdown={closeDropdownBottom}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[190px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Placement left

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronLeftOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownLeft = uiHelpers();
	let dropdownLeftStatus = $state(false);
	let closeDropdownLeft = dropdownLeft.close;
	$effect(() => {
		dropdownLeftStatus = dropdownLeft.isOpen;
	});
</script>

<div class="flex h-[160px] items-center justify-center">
	<Button onclick={dropdownLeft.toggle}
		><ChevronLeftOutline class="me-2 h-6 w-6 text-white dark:text-white" />Dropdown left</Button
	>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownLeftStatus}
			closeDropdown={closeDropdownLeft}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute -top-[80px] right-[175px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Placement right

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronRightOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownRight = uiHelpers();
	let dropdownRightStatus = $state(false);
	let closeDropdownRight = dropdownRight.close;
	$effect(() => {
		dropdownRightStatus = dropdownRight.isOpen;
	});
</script>

<div class="flex h-[160px] items-center justify-center">
	<Button onclick={dropdownRight.toggle}
		>Dropdown right<ChevronRightOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownRightStatus}
			closeDropdown={closeDropdownRight}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute -top-[80px] left-[10px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Placement top

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
	import { ChevronUpOutline } from 'flowbite-svelte-icons';
	import { page } from '$app/stores';
	let activeUrl = $state($page.url.pathname);
	$effect(() => {
		activeUrl = $page.url.pathname;
	});
	let dropdownTop = uiHelpers();
	let dropdownTopStatus = $state(false);
	let closeDropdownTop = dropdownTop.close;
	$effect(() => {
		dropdownTopStatus = dropdownTop.isOpen;
	});
</script>

<div class="flex h-[200px] items-end justify-center">
	<Button onclick={dropdownTop.toggle}
		>Dropdown top<ChevronUpOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownTopStatus}
			closeDropdown={closeDropdownTop}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute -top-[220px] -left-[170px]"
		>
			<DropdownUl>
				<DropdownLi href="/">Dashboard</DropdownLi>
				<DropdownLi href="/components/drawer">Drawer</DropdownLi>
				<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
				<DropdownLi href="/components">Alert</DropdownLi>
			</DropdownUl>
		</Dropdown>
	</div>
</div>

Radio

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Button,
		Dropdown,
		DropdownUl,
		DropdownLi,
		uiHelpers,
		DropdownHeader,
		Search,
		Radio,
		DropdownFooter
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline, UserRemoveSolid } from 'flowbite-svelte-icons';

	let group1 = $state(2);
	let dropdownRadio = uiHelpers();
	let dropdownRadioStatus = $state(false);
	let closeDropdownRadio = dropdownRadio.close;
	$effect(() => {
		dropdownRadioStatus = dropdownRadio.isOpen;
	});
</script>

<div class="flex h-64 items-start justify-center">
	<Button onclick={dropdownRadio.toggle}
		>Dropdown radio<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownRadioStatus}
			closeDropdown={closeDropdownRadio}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[45px] -left-[185px] w-48 overflow-y-auto pb-3 text-sm"
		>
			<DropdownUl>
				<DropdownHeader class="px-2 py-1">
					<Search size="md" />
				</DropdownHeader>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Radio name="group1" bind:group={group1} value={1}>Default radio</Radio>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Radio name="group1" bind:group={group1} value={2}>Checked state</Radio>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Radio name="group1" bind:group={group1} value={3}>Default radio</Radio>
				</DropdownLi>
			</DropdownUl>
			<DropdownFooter>
				<a
					href="/"
					class="-mb-1 flex items-center bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600"
				>
					<UserRemoveSolid class="me-1 h-5 w-5" />Delete user
				</a>
			</DropdownFooter>
		</Dropdown>
	</div>
</div>

Scrolling

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Button,
		Dropdown,
		DropdownUl,
		DropdownLi,
		DropdownFooter,
		Avatar,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	let dropdownScroll = uiHelpers();
	let dropdownScrollStatus = $state(false);
	let closeDropdownScroll = dropdownScroll.close;
	$effect(() => {
		dropdownScrollStatus = dropdownScroll.isOpen;
	});
</script>

<div class="flex h-60 items-start justify-center">
	<Button onclick={dropdownScroll.toggle}>
		Dropdown
		<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
	</Button>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownScrollStatus}
			closeDropdown={closeDropdownScroll}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[160px] w-48"
		>
			<DropdownUl class="h-40 w-52 overflow-y-auto py-1">
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-1.webp" size="xs" />Jese Leos</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-2.webp" size="xs" />Robert Gouth</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-3.webp" size="xs" />Bonnie Green</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-1.webp" size="xs" />Robert Wall</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-2.webp" size="xs" />Joseph Mcfall</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-3.webp" size="xs" />Leslie Livingston</DropdownLi
				>
				<DropdownLi href="/" aClass="flex items-center text-base font-semibold gap-2"
					><Avatar src="/images/profile-picture-3.webp" size="xs" />Bonnie Green</DropdownLi
				>
			</DropdownUl>
			<DropdownFooter class="overflow-hidden rounded-b-lg py-1">
				<a
					href="/"
					class="text-primary-600 dark:text-primary-500 -mb-1 flex items-center bg-gray-50 px-3 py-2 text-sm font-medium hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:hover:bg-gray-600"
				>
					<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" />Add new user
				</a>
			</DropdownFooter>
		</Dropdown>
	</div>
</div>

Search

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Button,
		Dropdown,
		DropdownUl,
		DropdownLi,
		DropdownHeader,
		DropdownFooter,
		Search,
		Checkbox,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline, UserRemoveSolid } from 'flowbite-svelte-icons';

	let searchTerm = $state('');
	const people = [
		{ name: 'Robert Gouth', checked: false },
		{ name: 'Jese Leos', checked: false },
		{ name: 'Bonnie Green', checked: true }
	];
	let filteredItems = $derived(
		people.filter((person) => person.name.toLowerCase().indexOf(searchTerm?.toLowerCase()) !== -1)
	);

	let dropdownSearch = uiHelpers();
	let dropdownSearchStatus = $state(false);
	let closeDropdownSearch = dropdownSearch.close;
	$effect(() => {
		dropdownSearchStatus = dropdownSearch.isOpen;
	});
</script>

<div class="flex h-60 items-start justify-center">
	<Button onclick={dropdownSearch.toggle}>
		Dropdown
		<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
	</Button>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownSearchStatus}
			closeDropdown={closeDropdownSearch}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[175px] w-52"
		>
			<DropdownHeader>
				<Search size="md" bind:value={searchTerm} />
			</DropdownHeader>
			<DropdownUl class="h-24 overflow-y-auto p-2">
				{#each filteredItems as person (person.name)}
					<DropdownLi liClass="rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-600">
						<Checkbox bind:checked={person.checked}>{person.name}</Checkbox>
					</DropdownLi>
				{/each}
			</DropdownUl>
			<DropdownFooter
				class="-mb-1 flex items-center bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600"
			>
				<UserRemoveSolid class="text-primary-700 dark:text-primary-700 me-2 h-4 w-4" />Delete user
			</DropdownFooter>
		</Dropdown>
	</div>
</div>

Toggle

<script lang="ts">
	import { sineIn } from 'svelte/easing';
	import {
		Button,
		Dropdown,
		DropdownUl,
		DropdownLi,
		DropdownFooter,
		Toggle,
		uiHelpers
	} from 'svelte-5-ui-lib';
	import { ChevronDownOutline, UserRemoveSolid } from 'flowbite-svelte-icons';
	let dropdownToggle = uiHelpers();
	let dropdownToggleStatus = $state(false);
	let closeDropdownToggle = dropdownToggle.close;
	$effect(() => {
		dropdownToggleStatus = dropdownToggle.isOpen;
	});
</script>

<div class="flex h-72 items-start justify-center">
	<Button onclick={dropdownToggle.toggle}
		>Dropdown radio<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button
	>
	<div class="relative">
		<Dropdown
			dropdownStatus={dropdownToggleStatus}
			closeDropdown={closeDropdownToggle}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[45px] -left-[185px] w-48 overflow-y-auto text-sm"
		>
			<DropdownUl>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Toggle class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600"
						>Default toggle</Toggle
					>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Toggle class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600" checked
						>Checked state</Toggle
					>
				</DropdownLi>
				<DropdownLi liClass="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
					<Toggle class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600"
						>Default toggle</Toggle
					>
				</DropdownLi>
			</DropdownUl>
			<DropdownFooter>
				<a
					href="/"
					class="-mb-1 flex items-center bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600"
				>
					<UserRemoveSolid class="me-1 h-5 w-5" />Delete user
				</a>
			</DropdownFooter>
		</Dropdown>
	</div>
</div>

User avatar

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

<div class="flex h-72 items-start justify-center">
	<Avatar
		onclick={dropdownUser.toggle}
		src="/images/profile-picture-3.webp"
		dot={{ color: 'green' }}
	/>

	<div class="relative">
		<Dropdown
			{activeUrl}
			dropdownStatus={dropdownUserStatus}
			closeDropdown={closeDropdownUser}
			params={{ y: 0, duration: 200, easing: sineIn }}
			class="absolute top-[40px] -left-[110px]"
		>
			<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/dropdown">Dropdown</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>
</div>

Component data

codewithshin.com
  • Repo
  • About