Navbar

About

The Navbar component is the navigation bar: a brand, one or more link groups, and dropdown menus. It collapses into a toggle menu below the breakpoint you set, and every link answers to the keyboard.

Example

The Navbar component is built using multiple elements, each serving a specific role:

NavBrandDisplays the brand name or logo and links to the homepage or any specified URL.
NavCollapseWraps the links that should fold into a toggle menu on small screens.
NavLinkGroupA wrapper for organizing multiple navigation links in a structured manner.
NavLinkRepresents an individual navigation link with customizable text and URL.
NavDropdownA dropdown menu inside the Navbar that contains additional navigation links.

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

The scrollBehavior prop controls how the Navbar behaves when the user scrolls. It provides flexibility in handling visibility and size adjustments based on scrolling direction.

default - The Navbar remains static and does not react to scrolling.
fixed - The Navbar stays fixed at the top of the page, even when scrolling.
shrinkOnScrollDown - The Navbar reduces in height when scrolling down and restores its size when scrolling up. You can control the scroll amount with the scrollAmountToShrink prop to shrink the Navbar. Follow this for more.
hideOnScrollDown - The Navbar disappears when scrolling down and reappears when scrolling up. Use the scrollAmountToHide prop to change the scroll amount to hide the Navbar. Follow this for more.
shrinkAndHide - The Navbar first shrinks on scroll down and then hides completely, reappearing at full size when scrolling up.

Default Navbar Fixed Navbar Shrink on Scroll Hide on Scroll Shrink and Hide on Scroll

Svelte

<Navbar scrollBehavior="default"> ... </Navbar>
<Navbar scrollBehavior="fixed"> ... </Navbar>
<Navbar scrollBehavior="shrinkOnScrollDown"> ... </Navbar>
<Navbar scrollBehavior="hideOnScrollDown"> ... </Navbar>
<Navbar scrollBehavior="shrinkAndHide"> ... </Navbar>

The Navbar also checks the scroll position when the page loads, so a page reloaded halfway down starts shrunk or hidden as it should.

Every behavior except default makes the Navbar fixed, so it no longer takes up space in the page. Add top padding to your page content, about the height of the Navbar, so nothing is hidden behind it.

Hide/Shrink Scroll Amount

The scrollAmountToShrink and scrollAmountToHide props allow fine-tuned control over how the Navbar reacts to scrolling. These values determine the scroll distance (in pixels) required to trigger shrinking or hiding effects, making the Navbar more adaptive to different layouts.

By default, scrollAmountToShrink is set to 32px, meaning the Navbar will shrink after scrolling this distance when shrinkOnScrollDown or shrinkAndHide is enabled. Similarly, scrollAmountToHide is 128px, which controls when the Navbar fully disappears when hideOnScrollDown or shrinkAndHide is used. Change them to suit how tall your navbar is.

Navbar Height

The height prop allows you to control the height of the Navbar. It helps in maintaining a consistent design while adjusting for different UI requirements. Available heights are: sm, md, lg and xl. Default is md. The presets set the vertical padding of the Navbar; any other value is used as classes, for example height="py-5". Dropdown menus open right below the Navbar in both cases.

Svelte

<Navbar height="sm"> ... </Navbar>
<Navbar height="md"> ... </Navbar> <!-- Default -->
<Navbar height="lg"> ... </Navbar>
<Navbar height="xl"> ... </Navbar>

Brand and Links

NavBrand

The NavBrand component shows your logo or site name as a link. Its href prop defaults to "/". Put text or an image inside it. Screen readers read its content, so give a logo image an alt text. If the brand has no readable content, such as an SVG logo, set the ariaLabel prop.

Svelte

<Navbar>
  <NavBrand href="/">BRAND</NavBrand>
</Navbar>

NavLink

A NavLink renders a link when it has an href, a button when it has an onclick instead, and a plain text element otherwise. Write the content inside the component, or pass it as the text prop, which renders as plain text. Set active on the link of the current page: it gets the active styles and aria-current="page". Clicking a link also closes the mobile menu.

Svelte

<NavLinkGroup>
  <NavLink href="/" active>Home</NavLink>
  <NavLink href="/about" text="About" />
  <NavLink href="/contact" text="Contact" />
</NavLinkGroup>

Responsive Navbar

Anything you put inside NavCollapse moves into a toggle menu below the navbar's breakpoint. NavCollapse owns the hamburger button and the open and close behavior, so a link group placed outside it stays visible at every width.

NavCollapse

The NavCollapse component acts as a wrapper for collapsible navigation items. When used inside the Navbar, it ensures that the contained elements are hidden on smaller screens and can be revealed through a toggle button. Without NavCollapse, all navigation items will remain visible, even on small screens, potentially affecting layout and usability.

navBreakpoint

The navBreakpoint prop in the Navbar component determines at which screen size the navigation should collapse. Available values are 'sm', 'md', 'lg' (default), and 'xl'. When the screen width is smaller than the defined breakpoint, NavCollapse will activate, hiding its content until toggled. Adjusting this value allows you to fine-tune when the menu should collapse based on your design needs. Set it to false to keep the links expanded at every screen size.

Svelte

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

In this example, the navigation items inside NavCollapse will collapse into a toggleable menu when the screen width is smaller than the md breakpoint.

Link Alignment

The align prop in the NavLinkGroup component controls how navigation links are positioned within the group. By default, links are aligned to the "start", keeping them on the left. If you want the links to be centered, set align to "center". To push the links to the right, use "end". In the example below, different NavLinkGroup elements demonstrate these alignments inside NavCollapse.

Svelte

<Navbar>
  <NavBrand href="#">BRAND</NavBrand>
  <NavCollapse>
    <NavLinkGroup align="start"> ... </NavLinkGroup> <!-- Default -->
    <NavLinkGroup align="center"> ... </NavLinkGroup>
    <NavLinkGroup align="end"> ... </NavLinkGroup>
  </NavCollapse>
</Navbar>

Navbar Dropdown

The NavDropdown component allows you to create dropdown menus within the Navbar, making it easy to organize navigation links under expandable sections. It supports various customizations, including event triggers, alignment, width, animations, and arrow icon control.

Svelte

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

The label prop/snippet in the NavDropdown defines the dropdown's visible label. You can pass it as a simple string or use a Snippet for more complex elements. For simple text or other simple content use it as a prop. For complex element, use label as a snippet.

Svelte

<NavDropdown label="Simple text label"> ... </NavDropdown>

Following example demonstrate the label as snippet.

Svelte

<NavDropdown>
  {#snippet label()}
    <Svg>
      <path d="M8 8a3 3 0 ... 1.418-.832 1.664z"/>
    </Svg>
    <b>My Profile</b>
  {/snippet}
  <!-- Add dropdown links here -->
</NavDropdown>

The width of the dropdown menu can be controlled using the width prop. Available values are "sm", "md", "lg", "xl", and "full". The "full" width setting is particularly useful for creating a mega menu.

Svelte

<NavDropdown ... width="sm"> ... </NavDropdown>
<NavDropdown ... width="md"> ... </NavDropdown> <!-- Default -->
<NavDropdown ... width="lg"> ... </NavDropdown>
<NavDropdown ... width="xl"> ... </NavDropdown>

The dropdown menu can be aligned to either "start" (default) or "end". Setting align="end" pushes the dropdown content to the right.

Svelte

<NavDropdown ... align="start"> ... </NavDropdown> <!-- Default -->
<NavDropdown ... align="end"> ... </NavDropdown>

By default, the dropdown opens when clicked. To open it on hover, set dropdownTriggerEvent="hover" on the Navbar, which applies to all its dropdowns, or triggerEvent="hover" on a single NavDropdown, which overrides the Navbar value for that dropdown. Both accept "click" and "hover".

Svelte

<!-- All dropdowns of this navbar open on hover -->
<Navbar dropdownTriggerEvent="hover"> ... </Navbar>

<!-- Only this dropdown -->
<NavDropdown ... triggerEvent="click"> ... </NavDropdown> <!-- Default -->
<NavDropdown ... triggerEvent="hover"> ... </NavDropdown>

The dropdown takes one of three animation styles: "fade", "slide" and "zoom". The default is "fade". To control the speed, follow this.

Svelte

<NavDropdown ... animation="fade"> ... </NavDropdown> <!-- Default -->
<NavDropdown ... animation="slide"> ... </NavDropdown>
<NavDropdown ... animation="zoom"> ... </NavDropdown>

The dropdown includes an arrow icon by default. You can hide it by setting the arrowIcon prop to false. If you wish to add your custom icon, use the arrowIcon as a snippet and place your icon inside it.

Svelte

<!-- No arrow icon -->
<NavDropdown label="No arrow" arrowIcon={false}> ... </NavDropdown>

<!-- Custom arrow icon -->
<NavDropdown label="Custom arrow">
  {#snippet arrowIcon()}
    <Svg> <path d="...."/> </Svg>
  {/snippet}
  ...
</NavDropdown>

Mega Menu

For more advanced layouts, the Navbar includes a Mega Menu option. When the width prop of a NavDropdown is set to "full", the dropdown expands to take the full width of the Navbar, creating a spacious layout for organizing multiple links, sections, or even embedded content. This makes the Mega Menu ideal for websites that require a detailed navigation structure, such as e-commerce platforms, dashboards, and content-heavy websites.

Svelte

<NavDropdown label="Mega menu" width="full">
  <div class="...">
    ...
  </div>
</NavDropdown>

Animation Speed

The animationSpeed prop of the Navbar sets the transition speed of the Navbar and everything inside it: the shrink and hide effects, the links and the dropdowns. Available values are "slower", "slow", "normal", "fast" (default), "faster" and "none".

Svelte

<Navbar animationSpeed="slower"> ... </Navbar>

Rounded

The rounded prop of the Navbar sets the corner radius of its links, its dropdown menus and the bottom corners of the mobile menu. Available values are "none", "sm", "md" (default), "lg", "xl", "2xl" and "full".

Svelte

<Navbar rounded="none"> ... </Navbar>

Customization

The Navbar is styled from the Navbar component, so one set of props styles every part of it:

class - classes for the <nav> element, merged with the defaults.
navInnerClasses - classes for the inner container that holds the brand and the links.
navCollapseClasses - classes for the mobile menu created by NavCollapse.
scrollShrinkClasses - classes added while the Navbar is shrunk by the shrinkOnScrollDown or shrinkAndHide behavior.
linkClasses - classes for every NavLink and dropdown trigger.
activeLinkClasses - classes added to an active NavLink.
dropdownLinkClasses - classes for the NavLinks inside a NavDropdown.

Each part also takes a class of its own. On a NavDropdown, class styles the menu panel, and linkClasses styles its trigger.

The inner row stops at the same width as a Container, so the brand and the links line up with the content below them. Both read the --max-width variable, and changing it moves them together.

Svelte

<Navbar
  class="bg-blue-50 dark:bg-blue-950"
  linkClasses="text-blue-700 dark:text-blue-300"
  activeLinkClasses="font-bold"
  dropdownLinkClasses="text-sm"
>
  ...
</Navbar>

Accessibility

The Navbar ships with the roles and the keyboard behavior a navigation region needs.

Use the ariaLabel prop on the Navbar to set an aria-label. It tells a screen reader which navigation region this is, which matters as soon as a page has more than one.

All interactive elements, including links and dropdowns, are fully keyboard-accessible. Users can open dropdowns with Enter or Space, navigate through links and move between dropdown items using the Tab key. The Escape key closes open dropdowns and moves focus back to the dropdown button. The mobile toggle button and each dropdown button point to the content they open with aria-controls.

For better accessibility, ensure that all links have clear, descriptive text. If using a NavDropdown, the aria-expanded attribute updates dynamically to reflect its open or closed state, improving the experience for screen reader users.

About

Example

Scroll Behavior

Navbar Scrolling Effects

Hide/Shrink Scroll Amount

Navbar Height

Brand and Links

NavBrand

NavLink

Responsive Navbar

NavCollapse

navBreakpoint

Link Alignment

Mega Menu

Animation Speed

Rounded

Customization

Accessibility

Configuration

Navbar

Navbar Brand

Navbar Collapse

Navbar Link

Navbar Link Group

About

Example

Scroll Behavior

Navbar Scrolling Effects

Hide/Shrink Scroll Amount

Navbar Height

Brand and Links

NavBrand

NavLink

Responsive Navbar

NavCollapse

navBreakpoint

Link Alignment

Navbar Dropdown

Dropdown Label

Dropdown Width

Dropdown Alignment

Dropdown Event

Dropdown Animation

Dropdown Arrow

Mega Menu

Animation Speed

Rounded

Customization

Accessibility

Configuration

Navbar

Navbar Brand

Navbar Collapse

Navbar Dropdown

Navbar Link

Navbar Link Group