Navbar - Aspect UI

Docs

Components

Navbar

Navbar - Aspect UI

The Navbar component serves as the primary navigation header for your application. It supports branding, links, dropdowns, mobile responsiveness, and sticky positioning.

Table of Contents#

Navbar Props
NavbarCollapse Props
NavbarCollapseBtn Props
NavbarContainer Props
NavbarItem Props
NavbarList Props

Navbar Props#

Prop	Type	Default	Description
children	ReactNode	-	Content inside the Navbar, typically NavbarCollapse, buttons, or links.
className	string	''	Additional CSS classes for the navbar container.
collapseBreakpoint	sm md lg xl 2xl all	'md'	Screen size breakpoint at which the navbar collapses.
...rest	HTMLAttributes<HTMLElement>	-	Additional HTML attributes spread to the navbar container.

NavbarCollapse Props#

Prop	Type	Default	Description
children	ReactNode	-	Content inside the collapsible navbar section.
className	string undefined	-	Additional CSS classes for the collapsible container.
...rest	HTMLAttributes<HTMLDivElement> & MotionProps	-	Any other HTML or animation props passed to the collapsible container.

NavbarCollapseBtn Props#

Prop	Type	Default	Description
className	string	''	Additional CSS classes for the collapse toggle button.
icon	ReactNode	-	Optional icon to display inside the collapse toggle button.
...rest	ButtonHTMLAttributes<HTMLButtonElement>	-	Other native button attributes passed to the collapse button.

NavbarContainer Props#

Prop	Type	Default	Description
children	ReactNode	-	Content inside the Navbar container.
className	string	''	Additional CSS classes for the Navbar container wrapper.
...rest	HTMLAttributes<HTMLElement>	-	Additional HTML attributes passed to the container element.

NavbarItem Props#

Prop	Type	Default	Description
children	ReactNode	-	Content inside the Navbar item, such as a link or button.
className	string	''	Additional CSS classes for the Navbar item.
...rest	HTMLAttributes<HTMLElement>	-	Additional HTML attributes passed to the Navbar item element.

NavbarList Props#

Prop	Type	Default	Description
children	ReactNode	-	Content inside the Navbar list, typically multiple NavbarItem components.
className	string	''	Additional CSS classes for the Navbar list container.
...rest	HTMLAttributes<HTMLElement>	-	Additional HTML attributes passed to the Navbar list container.