{"id":18439270,"url":"https://github.com/themustafaomar/tailwindcss-navbars","last_synced_at":"2025-04-15T03:47:00.051Z","repository":{"id":136882025,"uuid":"318274446","full_name":"themustafaomar/tailwindcss-navbars","owner":"themustafaomar","description":"Lightweight Tailwindcss plugin for creating responsive navbars with hoverable and clickable dropdowns out of the box, inspired by Bootstrap with the power of Tailwindcss.","archived":false,"fork":false,"pushed_at":"2020-12-03T18:02:47.000Z","size":16,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T03:46:52.992Z","etag":null,"topics":["navbar","navigation-bar","tailwindcss-navbars","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://themustafaomar.com/projects/tailwindcss-navbars","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themustafaomar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-03T17:47:03.000Z","updated_at":"2024-09-10T05:05:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"06f7ab6d-9dd4-43b1-8379-eafe2f71bfcc","html_url":"https://github.com/themustafaomar/tailwindcss-navbars","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themustafaomar%2Ftailwindcss-navbars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themustafaomar%2Ftailwindcss-navbars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themustafaomar%2Ftailwindcss-navbars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themustafaomar%2Ftailwindcss-navbars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themustafaomar","download_url":"https://codeload.github.com/themustafaomar/tailwindcss-navbars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003941,"owners_count":21196794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["navbar","navigation-bar","tailwindcss-navbars","tailwindcss-plugin"],"created_at":"2024-11-06T06:24:02.088Z","updated_at":"2025-04-15T03:47:00.027Z","avatar_url":"https://github.com/themustafaomar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Getting started\nInstall the plugin via `npm` \n\n```bash\nnpm install tailwindcss-navbars\n```\n\n#### Register the plugin\nRegister the `tailwindcss-navbars` plugin by adding it within your `tailwind.config.js` as below.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss-navbars'),\n  ]\n}\n```\n\n## Options\nThe `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.\n\n### Links\nYou may want to control the link color and hover color state as well, here is `links` object comes in.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      customizeNavbar: theme =\u003e ({\n        options: {\n          links: {\n            color: '#000', // Tip: if you want to inherit color from the parent (may be the body) set color equals to `false`\n            hoverColor: '#66f',\n          },\n        },\n      })\n    }\n  }\n}\n```\n\n### Expand breakpoints\nThis option makes the plugin create expand breakpoints for you for example:\n\nBy 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.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      customizeNavbar: theme =\u003e ({\n        options: {\n          expandBreakpoints: {\n            allow: ['sm', 'md'], // Default is ['sm', 'md']\n            exclude: [], // default is []\n          },\n        },\n      })\n    }\n  }\n}\n```\n\nAnother example: this will generate `.navbar-expand-sm`, `.navbar-expand-md` and `.navbar-expand-lg`\n```js\nmodule.exports = {\n  // ...\n  expandBreakpoints: {\n    allow: '*', // You can use the wildcard `*` to create expand classes for all screens.\n    // Notice that exclude has the priority over `allow`\n    // This means in this case `xl` and `2xl` will be excluded\n    exclude: ['xl', '2xl'],\n  },\n  // ...\n}\n```\n\n### Dropdown options\nThere're two types of dropdown menus `hoverable` and `clickable`\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      customizeNavbar: theme =\u003e ({\n        options: {\n          dropdowns: {\n            animation: true, // This enables the dropdown animation default is `false`\n            defaultActiveClass: 'active', // Set the default active class, default is `active`\n          },\n        },\n      })\n    }\n  }\n}\n```\n\n#### Hoverable dropdowns\nBy default the dropdowns work with `hover`\n\n```html\n\u003cnav class=\"navbar navbar-expand-md\"\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"navbar-brand\"\u003e\n      \u003ch5\u003eAwesomeLogo\u003c/h5\u003e\n    \u003c/div\u003e\n    \u003cbutton class=\"navbar-toggler\"\u003e\n      \u003cspan\u003e\u003c/span\u003e\n      \u003cspan\u003e\u003c/span\u003e\n      \u003cspan\u003e\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"navbar-collapse\"\u003e\n      \u003cul class=\"navbar-items ml-auto\"\u003e\n        \u003cli\u003e\u003ca href=\"#\" class=\"nav-link\"\u003eLink\u003c/a\u003e\u003c/li\u003e\n        \u003cli class=\"dropdown\"\u003e\n          \u003ca href=\"#\" class=\"nav-link\"\u003e\u003c/a\u003e\n          \u003cdiv class=\"dropdown-menu\"\u003e\n            \u003ca class=\"dropdown-item\" href=\"\"\u003eDropdown link\u003c/a\u003e\n            \u003ca class=\"dropdown-item\" href=\"\"\u003eOther dropdown link\u003c/a\u003e\n            \u003ca class=\"dropdown-item\" href=\"\"\u003eSeparated link\u003c/a\u003e\n            \u003ca class=\"dropdown-divider\" href=\"#\"\u003e\u003c/a\u003e\n            \u003ca class=\"dropdown-item\" href=\"\"\u003eOne more\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n#### Clickable dropdowns\n`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.\n\n```js\n// app.js for example.\nimport 'tailwindcss-navbars/src/client/navbar.js'\n\n// ...\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemustafaomar%2Ftailwindcss-navbars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemustafaomar%2Ftailwindcss-navbars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemustafaomar%2Ftailwindcss-navbars/lists"}