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 -left-[150px] top-[40px]">
      <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 -left-[160px] top-[50px]">
      <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 -left-[195px] top-[45px]">
      <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 -left-[240px] top-[45px] 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 -left-[90px] top-[20px]">
      <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 -left-[150px] top-[40px] overflow-visible">
      <DropdownUl>
        <DropdownLi href="/">Dashboard</DropdownLi>
        <button onclick={dropdownMultiLevel2.toggle} class="flex p-2 pl-4">Dropdown<ChevronRightOutline class="ms-2 h-6 w-6 text-primary-700 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="ms-2 inline h-6 w-6 text-primary-800 dark:text-white" />
        </NavLi>
        <Dropdown dropdownStatus={dropdownNavStatus} closeDropdown={closeDropdownNav} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -top-[20px] left-[120px] md:-left-[20px] md:top-[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 -top-2 end-4 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 -left-[230px] top-[30px] 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-xs text-primary-600 dark:text-primary-500">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-xs text-primary-600 dark:text-primary-500">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-xs text-primary-600 dark:text-primary-500">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 -left-[190px] top-[40px]">
      <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 -left-[170px] -top-[220px]">
      <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 -left-[185px] top-[45px] 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 -left-[160px] top-[40px] 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="-mb-1 flex items-center bg-gray-50 px-3 py-2 text-sm font-medium text-primary-600 hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:text-primary-500 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 -left-[175px] top-[40px] 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="me-2 h-4 w-4 text-primary-700 dark:text-primary-700" />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 -left-[185px] top-[45px] 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 -left-[110px] top-[40px]">
      <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