Navbar

About

The Navbar component provides a fully responsive and accessible navigation bar for your application. It supports branding, grouped links, and dropdown menus, making it suitable for both simple and complex navigation structures. With built-in keyboard navigation and customizable styling options, the Navbar ensures a seamless user experience across all devices.

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.
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>

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. Adjusting these values ensures a smooth and customized scroll behavior.

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.

Svelte

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

Responsive Navbar

The Navbar is fully responsive and adapts to different screen sizes with the help of the NavCollapse component. Any navigation elements placed inside NavCollapse will automatically collapse into a toggleable menu on smaller screens, ensuring a clean and accessible navigation experience. This is particularly useful for mobile and tablet views where space is limited.

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.

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. Both the Navbar and NavDropdown components have the dropdownEvent prop. If you set it in the Navbar, it applies to all dropdowns. However, if you set it in a NavDropdown, it affects only that dropdown and overrides the Navbar's dropdownEvent value. You can choose between "click" and "hover". By default, the dropdown opens when clicked. If you prefer it to open on hover, set the dropdownEvent prop to "hover". It accepts two props, "click" & "hover".

Svelte

<Navbar>
  <NavBrand href="#">BRAND</NavBrand>
  <NavLinkGroup>
    <NavDropdown ... dropdownEvent="click"> ... </NavDropdown> <!-- Default -->
    <NavDropdown ... dropdownEvent="hover"> ... </NavDropdown>
  </NavLinkGroup>
</Navbar>

The dropdown supports animations to enhance its appearance. You can choose from three animation styles: "fade", "slide", and "zoom". By default, the dropdown uses the "fade" effect for a smooth transition. These animations make the dropdown feel more interactive and visually appealing. To control animation 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

The Navbar is designed to be highly versatile, making it suitable for both simple navigation and complex menu structures. Whether you need a minimal navigation bar or a feature-rich menu system, it adapts to your design needs effortlessly.

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>

Mega Menu

The Navbar is designed to be highly versatile, making it suitable for both simple navigation and complex menu structures. Whether you need a minimal navigation bar or a feature-rich menu system, it adapts to your design needs effortlessly.

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>

Accessibility

The Navbar is designed with accessibility in mind, ensuring smooth navigation for all users, including those using screen readers and keyboard navigation.

To enhance accessibility, use the ariaLabel prop in the Navbar component to define an appropriate aria-label value. This helps screen readers identify the purpose of the navigation.

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.

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.

By following these guidelines and utilizing the provided accessibility features, you can create a navigation system that is inclusive and user-friendly.

Getting Started

Components

Forms

Utilities

About

Example

Scroll Behavior

Navbar Scrolling Effects

Hide/Shrink Scroll Amount

Navbar Height

Responsive Navbar

NavCollapse

navBreakpoint

Link Alignment

Mega Menu

Mega Menu

Accessibility

Configuration

About

Example

Scroll Behavior

Navbar Scrolling Effects

Hide/Shrink Scroll Amount

Navbar Height

Responsive Navbar

NavCollapse

navBreakpoint

Link Alignment

Navbar Dropdown

Dropdown Label

Dropdown Width

Dropdown Alignment

Dropdown Event

Dropdown Animation

Dropdown Arrow

Mega Menu

Mega Menu

Accessibility

Configuration