Flowbite Svelte Components

Default navbar

<Navbar fluid={true} rounded={true}>
  <NavbarBrand href="https://flowbite.com/">
    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
  </NavbarBrand>
  <NavbarToggle />
  <NavbarCollapse>
    <NavbarLink href="/navbars" active={true}>Home</NavbarLink>
    <NavbarLink href="/navbars">About</NavbarLink>
    <NavbarLink href="/navbars">Services</NavbarLink>
    <NavbarLink href="/navbars">Pricing</NavbarLink>
    <NavbarLink href="/navbars">Contact</NavbarLink>
  </NavbarCollapse>
</Navbar>

Navbar with CTA button

<Navbar fluid={true} rounded={true}>
  <NavbarBrand href="https://flowbite.com/">
    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
  </NavbarBrand>
  <div class="flex md:order-2">
    <Button>Get started</Button>
    <NavbarToggle />
  </div>
  <NavbarCollapse>
    <NavbarLink href="/navbars" active={true}>Home</NavbarLink>
    <NavbarLink href="/navbars">About</NavbarLink>
    <NavbarLink href="/navbars">Services</NavbarLink>
    <NavbarLink href="/navbars">Pricing</NavbarLink>
    <NavbarLink href="/navbars">Contact</NavbarLink>
  </NavbarCollapse>
</Navbar>

Navbar with dropdown

<Navbar fluid={true} rounded={true}>
  <NavbarBrand href="https://flowbite.com/">
    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
  </NavbarBrand>
  <div class="flex md:order-2">
    <Button>Get started</Button>
    <NavbarToggle />
  </div>
  <NavbarCollapse>
    <NavbarLink href="/navbars" active={true}>Home</NavbarLink>
    <NavbarLink href="/navbars">About</NavbarLink>
    <NavbarLink href="/navbars">Services</NavbarLink>
    <NavbarLink href="/navbars">Pricing</NavbarLink>
    <NavbarLink href="/navbars">Contact</NavbarLink>
  </NavbarCollapse>
</Navbar>