Navbar Component

A responsive, modular navigation bar with logo, links, call-to-actions, and mobile support. Explore different layout patterns and hover effects built on top of the base components.

Installation

npm install @rds/navbar

Basic Navbar

A complete navbar with logo, links, CTAs, and a mobile drawer.

Centered Links

Center your navigation links with spacers on each side.

Split Layout

Keep links aligned left while placing CTAs on the right.

Underline From Left

A hover effect where underline grows from the left side.

Underline From Center

A hover effect where underline expands from the center outward.

Highlight Background

A hover effect where the link is highlighted with a subtle background.

Gradient Underline

An animated gradient underline hover effect.