https://github.com/themustafaomar/tailwindcss-navbars
Lightweight Tailwindcss plugin for creating responsive navbars with hoverable and clickable dropdowns out of the box, inspired by Bootstrap with the power of Tailwindcss.
https://github.com/themustafaomar/tailwindcss-navbars
navbar navigation-bar tailwindcss-navbars tailwindcss-plugin
Last synced: about 1 month ago
JSON representation
Lightweight Tailwindcss plugin for creating responsive navbars with hoverable and clickable dropdowns out of the box, inspired by Bootstrap with the power of Tailwindcss.
- Host: GitHub
- URL: https://github.com/themustafaomar/tailwindcss-navbars
- Owner: themustafaomar
- License: mit
- Created: 2020-12-03T17:47:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-03T18:02:47.000Z (over 4 years ago)
- Last Synced: 2025-04-15T03:46:52.992Z (about 1 month ago)
- Topics: navbar, navigation-bar, tailwindcss-navbars, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://themustafaomar.com/projects/tailwindcss-navbars
- Size: 15.6 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Getting started
Install the plugin via `npm`
```bash
npm install tailwindcss-navbars
```
#### Register the plugin
Register the `tailwindcss-navbars` plugin by adding it within your `tailwind.config.js` as below.
```js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-navbars'),
]
}
```
## Options
The `tailwindcss-navbars` plugin comes with simple options to control the bundle size by removing unnecessary code blocks we don't want to add extra code in production without any benefits.
### Links
You may want to control the link color and hover color state as well, here is `links` object comes in.
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
customizeNavbar: theme => ({
options: {
links: {
color: '#000', // Tip: if you want to inherit color from the parent (may be the body) set color equals to `false`
hoverColor: '#66f',
},
},
})
}
}
}
```
### Expand breakpoints
This option makes the plugin create expand breakpoints for you for example:
By appling the below code it will create two breakpoint classes one for `.navbar-expand-sm` and one for `.navbar-expand-md` you can use one of them to expand the navbar in a certain screen.
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
customizeNavbar: theme => ({
options: {
expandBreakpoints: {
allow: ['sm', 'md'], // Default is ['sm', 'md']
exclude: [], // default is []
},
},
})
}
}
}
```
Another example: this will generate `.navbar-expand-sm`, `.navbar-expand-md` and `.navbar-expand-lg`
```js
module.exports = {
// ...
expandBreakpoints: {
allow: '*', // You can use the wildcard `*` to create expand classes for all screens.
// Notice that exclude has the priority over `allow`
// This means in this case `xl` and `2xl` will be excluded
exclude: ['xl', '2xl'],
},
// ...
}
```
### Dropdown options
There're two types of dropdown menus `hoverable` and `clickable`
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
customizeNavbar: theme => ({
options: {
dropdowns: {
animation: true, // This enables the dropdown animation default is `false`
defaultActiveClass: 'active', // Set the default active class, default is `active`
},
},
})
}
}
}
```
#### Hoverable dropdowns
By default the dropdowns work with `hover`
```html
```
#### Clickable dropdowns
`Clickable` dropdowns needs some lines of Javascript to work and thankfully we've created this code for you, you just need to import this file in your project.
```js
// app.js for example.
import 'tailwindcss-navbars/src/client/navbar.js'
// ...
```