Navbar - Keep React

The Navbar component is a fundamental UI element used in web development to create a navigation bar at the top of a webpage. It provides a structured and organized way to display links, menus, and other navigation-related content to users.

Table of Contents#

Default Navbar
Navbar With Center Logo
Navbar With Mobile Menu
Navbar With SearchBar
Ecommerce Navbar
Navbar API Reference
Nav Link API Reference

Default Navbar#

It provides a sleek and modern default style that developers can use as a starting point for their navigation needs.

Navbar With Center Logo#

It is ideal for web applications and websites that want to prominently showcase their brand or logo at the center of the navigation bar.

Navbar With Mobile Menu#

It includes a collapsible menu that is hidden by default and can be toggled open and closed by tapping on a menu icon.

Navbar With SearchBar#

This component is designed to enhance user interactions by providing a convenient search feature within the navigation bar.

Ecommerce Navbar#

This component is designed to enhance user interactions by providing a convenient search feature within the navigation bar.

Navbar API Reference#

Explore the available props for the <Navbar> component

Property	Description	Type	Default
fluid	Determines whether the navbar should be fluid or fixed-width.	boolean	false
rounded	Specifies whether the navbar should have rounded corners.	boolean	false
border	Controls whether a border should be added to the navbar.	boolean	false
collapseType	Responsive menu collapse effect	sidebar fullWidth	false

Nav Link API Reference#

Explore the available props for the <Navbar.Link> component

Property	Description	Type	Default
icon	Menu Link Icon	string	CaretRight
linkName	Menu Link name	string	home
iconAnimation	Menu Link Icon Animated or not	boolean	true
href	Menu Link href	string	/