# 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. ## 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: - `NavBrand`Displays the brand name or logo and links to the homepage or any specified URL. - `NavCollapse`Wraps the links that should fold into a toggle menu on small screens. - `NavLinkGroup`A wrapper for organizing multiple navigation links in a structured manner. - `NavLink`Represents an individual navigation link with customizable text and URL. - `NavDropdown`A dropdown menu inside the Navbar that contains additional navigation links. ```html BRAND ``` ## 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. ### Navbar Scrolling Effects - `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](#hide/shrink-scroll-amount). - `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](#hide/shrink-scroll-amount). - `shrinkAndHide` - The Navbar first shrinks on scroll down and then hides completely, reappearing at full size when scrolling up. ```html ... ... ... ... ... ``` 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. ```html ... ... ... ... ``` ## 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. ```html BRAND ``` ### 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. ```html Home ``` ## 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. ```html BRAND ... ``` 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`. ```html BRAND ... ... ... ``` ## 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. ```html BRAND ... ``` ### Dropdown Label 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. ```html ... ``` ### Dropdown Width 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. ```html ... ... ... ... ``` ### Dropdown Alignment The dropdown menu can be aligned to either `"start"` (default) or `"end"`. Setting `align="end"` pushes the dropdown content to the right. ```html ... ... ``` ### Dropdown Event 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"`. ```html ... ... ... ``` ### Dropdown Animation The dropdown takes one of three animation styles: `"fade"`, `"slide"` and `"zoom"`. The default is `"fade"`. To control the speed, [follow this](#animation-speed). ```html ... ... ... ``` ### Dropdown Arrow 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. ```html ... {#snippet arrowIcon()} {/snippet} ... ``` ## 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. ```html

...

``` ## 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"`. ```html ... ``` ## 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"`. ```html ... ``` ## Customization The Navbar is styled from the **Navbar** component, so one set of props styles every part of it: - `class` - classes for the `

` 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`](https://www.theui.dev/docs/container), so the brand and the links line up with the content below them. Both read the [`--max-width`](https://www.theui.dev/docs/container#page-width) variable, and changing it moves them together. ```html ... ``` ## 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. ## Configuration ### Navbar #### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `scrollBehavior` | [NAV_SCROLL_BEHAVIOR](https://www.theui.dev/docs/types#navbar-scroll-behavior-type) | `default` | Behavior when scrolling: "default", "fixed", "shrinkOnScrollDown", "hideOnScrollDown" or "shrinkAndHide". Every value except "default" makes the navbar fixed. | | `scrollAmountToShrink` | number | `32` | Scroll distance (px) before the navbar shrinks. | | `scrollAmountToHide` | number | `128` | Scroll distance (px) before the navbar hides. | | `height` | 'sm' \| 'md' \| 'lg' \| 'xl' \| string | `md` | Height of the navbar. The presets set its vertical padding; any other value is used as classes. | | `navBreakpoint` | 'sm' \| 'md' \| 'lg' \| 'xl' \| false | `lg` | Screen size below which the content of `NavCollapse` folds into the toggle menu. Set it to false to never fold. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `fast` | Transition speed of the navbar and all the components inside it. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `md` | Corner radius of the links, the dropdown menus and the mobile menu. | | `ariaLabel` | string | `Navigation bar` | Accessible name of the `

` element. | | `dropdownTriggerEvent` | 'hover' \| 'click' | `click` | How every `NavDropdown` of this navbar opens. A dropdown can override it with its own `triggerEvent`. | | `navInnerClasses` | string | `undefined` | Custom classes for the inner container that holds the brand and the links. | | `navCollapseClasses` | string | `undefined` | Custom classes for the mobile menu created by `NavCollapse`. | | `scrollShrinkClasses` | string | `undefined` | Custom classes added while the navbar is shrunk. | | `linkClasses` | string | `undefined` | Custom classes for every `NavLink` and dropdown trigger. | | `activeLinkClasses` | string | `undefined` | Custom classes added to an active `NavLink`. | | `dropdownLinkClasses` | string | `undefined` | Custom classes for the `NavLink`s inside a `NavDropdown`. | #### Dynamic props | Name | Description | | --- | --- | | `class` | Classes for the `

` element, merged with the default classes. | #### Snippets | Name | Description | | --- | --- | | `children` | The content of the navbar: NavBrand, NavCollapse, NavLinkGroup and so on. | ### Navbar Brand #### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `href` | string | `/` | URL of the brand link, usually the homepage. | | `ariaLabel` | string | `undefined` | Accessible name of the brand link. Only needed when the brand has no readable content, such as an SVG logo. | #### Dynamic props | Name | Description | | --- | --- | | `class` | Classes for the brand link, merged with the default classes. | #### Snippets | Name | Description | | --- | --- | | `children` | The logo or site name. | ### Navbar Collapse #### Snippets | Name | Description | | --- | --- | | `children` | The links and groups that fold into the toggle menu on small screens. | | `toggleIcon` | Custom icon for the toggle button. If provided, the default icon is replaced. | ### Navbar Dropdown #### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `label` | string \| Snippet | `undefined` | Trigger label. A string renders as plain text; a Snippet is rendered as it is. | | `align` | 'start' \| 'end' | `start` | Aligns the menu to the start or end of its trigger. | | `width` | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | `sm` | Width of the menu. "full" spans the whole navbar, for a mega menu. | | `triggerEvent` | 'hover' \| 'click' | `Inherited from the Navbar's dropdownTriggerEvent, or "click` | How this dropdown opens. | | `animation` | 'fade' \| 'slide' \| 'zoom' | `fade` | Open and close animation of the menu. | | `arrowIcon` | Snippet \| boolean | `true` | Shows the arrow next to the label. Set it to false to hide it, or pass a Snippet to use your own icon. | | `linkClasses` | string | `undefined` | Custom classes for the dropdown trigger, merged with the Navbar's `linkClasses`. | #### Dynamic props | Name | Description | | --- | --- | | `class` | Classes for the menu panel, merged with the default classes. | #### Snippets | Name | Description | | --- | --- | | `children` | The content of the menu, usually NavLinks or custom mega menu content. | | `label` | Custom trigger content, as an alternative to the string prop. | | `arrowIcon` | Replaces the default arrow icon. | ### Navbar Link #### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `text` | string | `undefined` | Link content as a string, instead of writing it inside the component. It renders as plain text. | | `active` | string \| boolean | `false` | Marks the link of the current page. It adds the Navbar's `activeLinkClasses` and `aria-current="page"`. | #### Dynamic props | Name | Description | | --- | --- | | `href` | URL of the link. Without it, the NavLink renders as a button when it has an onclick, and as plain text otherwise. | | `class` | Classes for the link, merged with the default classes. | #### Snippets | Name | Description | | --- | --- | | `children` | The link content, used when the text prop is not set. | ### Navbar Link Group #### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `align` | 'start' \| 'center' \| 'end' | `start` | Horizontal alignment of the link group. | #### Dynamic props | Name | Description | | --- | --- | | `class` | Classes for the group container, merged with the default classes. | #### Snippets | Name | Description | | --- | --- | | `children` | The NavLinks and NavDropdowns of the group. | --- Category: Components Keywords: navbar, navigation, responsive, menu, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt