Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/esr-style/navbar-kit

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/esr-style/navbar-kit
Owner: ESR-style
Created: 2024-11-10T07:46:36.000Z (about 1 month ago)
Default Branch: master
Last Pushed: 2024-11-10T07:55:03.000Z (about 1 month ago)
Last Synced: 2024-11-10T08:27:45.417Z (about 1 month ago)
Language: JavaScript
Homepage: https://navbar-kit.vercel.app
Size: 0 Bytes
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Creative Navbar Kit

Welcome to the **Creative Navbar Kit**! This kit features 10 unique and interactive navbar components built with React, Tailwind CSS, and other popular libraries. Each component is designed to enhance your web application's navigation with modern styles and smooth interactions.

## Features
- **React Components**: Built with modern libraries including `react-icons`, `@headlessui/react`, and `framer-motion`.
- **Tailwind CSS Styling**: Each component is styled with Tailwind CSS, making it easy to customize.
- **Ready to Use**: Simply copy-paste each component into your project and start using.
- **Interactive and Responsive**: Each navbar is responsive and includes interactive elements to improve the user experience.

## Dependencies
These components use the following libraries:
- **React Icons**: For icons.
- **@headlessui/react**: For dropdowns and modals.
- **Framer Motion**: For animations and transitions.
- **Tailwind CSS**: For styling.

Install them in your project if you haven’t already:
```bash
npm install react-icons @headlessui/react framer-motion tailwindcss
```

## Usage
1. **Copy the Component**: Navigate to the specific navbar component file, such as `Navbar1.jsx`.
2. **Paste into Your Project**: Add the component file to your project’s `src/components` directory.
3. **Import and Use**: Import the component into your desired file and add it to your JSX.

Example:
```javascript
import Navbar1 from './components/Navbar1';

function App() {
return (

{/* Other components */}

);
}
```

## Components Overview
Each navbar component is designed for a unique style and interaction. Below are brief descriptions and features of each:

1. ### Timeline Flow
- **Tagline**: Vertical Timeline Navigation
- **Description**: Elegant vertical timeline navigation with interactive progress indicators.
- **Features**: Progress Tracking, Vertical Layout, Smooth Scrolling
- **Category**: Modern

2. ### Minimal Stripe
- **Tagline**: Clean & Modern Navigation
- **Description**: Minimalist horizontal navbar with subtle hover effects.
- **Features**: Clean Design, Responsive Layout, Smart Dropdowns
- **Category**: Minimal

3. ### Command Center
- **Tagline**: Power User Navigation
- **Description**: Advanced command palette with keyboard shortcuts.
- **Features**: Keyboard Shortcuts, Search, Quick Actions
- **Category**: Premium

4. ### Timeline Flow (Unique Variant)
- **Tagline**: Vertical Timeline Navigation
- **Description**: Elegant vertical timeline navigation with interactive progress indicators.
- **Features**: Progress Tracking, Vertical Layout, Smooth Scrolling
- **Category**: Unique

5. ### Magnetic Touch
- **Tagline**: Interactive Hover Effects
- **Description**: Magnetic interaction effects with cursor-following animations.
- **Features**: Magnetic Effects, Mouse Tracking, Fluid Animation
- **Category**: Interactive

6. ### Split View
- **Tagline**: Dual-tone Navigation
- **Description**: Split-screen navigation with dynamic transitions and morphing effects.
- **Features**: Split Layout, Theme Toggle, Search Modal
- **Category**: Modern

7. ### Eclipse Nav
- **Tagline**: Circular Progress Navigation
- **Description**: Circular navigation system with progress indicators and animations.
- **Features**: Circular Design, Progress Ring, Animated Icons
- **Category**: Creative

8. ### Crystal Glass
- **Tagline**: Premium Glass Effects
- **Description**: Multi-layered glassmorphic navigation with profile and notification system.
- **Features**: Glass UI, Notifications, Profile Menu
- **Category**: Premium

9. ### Radial Menu
- **Tagline**: Circular Action Menu
- **Description**: Expandable radial menu with floating action buttons.
- **Features**: Radial Layout, Spring Animations, Touch Friendly
- **Category**: Interactive

10. ### Frost UI
- **Tagline**: Modern Command Center
- **Description**: Command center style navigation with search and notifications.
- **Features**: Command Bar, Quick Search, Notification Hub
- **Category**: Premium