Dropdown Navbar

Examples

You can change textsize prop to text-xs, text-sm, text-base, text-lg or text-xl.

Dropdown Navbar Setup

<script>
  import { DropdownNavbar } from "flowbite-svelte";
  let sitename = "Flowbite Svelte";
  let logo = "/images/flowbite-svelte-logo-30.png";
  let alt = "flowbite-svelte";
  let textsize = "text-lg";
  let menus = [
    {
      name: "Home",
      href: "/",
      rel: "",
    },
    {
      name: "Cards",
      href: "/cards",
      rel: "",
      child: [
        {
          name: "Card",
          href: "/cards/card",
          rel: "",
        },
        {
          name: "CTA Card",
          href: "/cards/cta",
          rel: "",
        },
        {
          name: "Ecommerce Card",
          href: "/cards/ecommerce",
          rel: "",
        },
      ],
    },
    {
      name: "Modals",
      href: "/",
      rel: "",
      child: [
        {
          name: "Small",
          href: "/modals/small",
          rel: "",
        },
        {
          name: "Medium",
          href: "/modals/medium",
          rel: "",
        },
      ],
    },
  ];
</script>

<DropdownNavbar {menus} {sitename} {alt} {logo} {textsize} />

Props

The component has the following props, type, and default values. See types page for type information.

Related components

References