Navbar

A responsive navigation bar with support for dropdown menus, keyboard navigation, and customizable styling. It’s ideal for building primary site navigation or complex menu systems.

Example

..

Svelte 
<script>
  import {Navbar, NavBrand, NavLinkGroup, NavDropdown, NavLink} from "theui-svelte";
</script>

<Navbar>
  <NavBrand href="#">BRAND</NavBrand>
  <NavLinkGroup>
    <NavLink href="#" text="Link 1" />
    <NavLink href="#" text="Link 2" />
    <NavLink href="#" text="Link 3" />
    <NavDropdown label="Dropdown">
      <NavLink href="#" text="Dropdown Link 1" />
      <NavLink href="#" text="Dropdown Link 2" />
      <NavLink href="#" text="Dropdown Link 3" />
    </NavDropdown>
  </NavLinkGroup>
</Navbar>

Scroll Behavior

..

Default Navbar Fixed Navbar Shrink on Scroll Down Hide on Scroll Down Shrink and Hide on Scroll Down
Svelte 
<Navbar height="sm"> ... </Navbar>
<Navbar height="md"> ... </Navbar> <!-- Default -->
<Navbar height="lg"> ... </Navbar>
<Navbar height="xl"> ... </Navbar>

Responsive Navbar

..

Svelte 
<Navbar>
  <NavBrand href="#">BRAND</NavBrand>
  <NavCollapse>
    <NavLinkGroup>
      ...
    </NavLinkGroup>
  </NavCollapse>
</Navbar>

Accessibility

The Alert component is built with accessibility in mind, handling all necessary ARIA attributes, including role="alert" and aria-label="Close alert", to ensure compatibility with assistive technologies. These attributes are automatically applied, so you don't need to configure them manually.

The only consideration required is maintaining proper color contrast for the alert's text and background to ensure readability and compliance with accessibility standards.

Configuration