{"id":15024827,"url":"https://github.com/johndatserakis/vue-navigation-bar","last_synced_at":"2025-10-25T06:45:42.943Z","repository":{"id":34353622,"uuid":"177055777","full_name":"johndatserakis/vue-navigation-bar","owner":"johndatserakis","description":"🧭 A simple, pretty navbar for your Vue projects.","archived":false,"fork":false,"pushed_at":"2024-04-16T13:13:21.000Z","size":3749,"stargazers_count":190,"open_issues_count":2,"forks_count":33,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-03-28T23:09:21.206Z","etag":null,"topics":["bar","menu","nav","navbar","navigation","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://johndatserakis.github.io/vue-navigation-bar/","language":"Vue","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/johndatserakis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-03-22T02:10:47.000Z","updated_at":"2025-02-27T03:09:11.000Z","dependencies_parsed_at":"2024-06-18T15:34:10.296Z","dependency_job_id":"923c54f7-683f-46fe-aa12-e961688598f6","html_url":"https://github.com/johndatserakis/vue-navigation-bar","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.171875,"last_synced_commit":"e5c188e8dbdf893a4011517854f4dba340ff05bf"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-navigation-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-navigation-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-navigation-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-navigation-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johndatserakis","download_url":"https://codeload.github.com/johndatserakis/vue-navigation-bar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266565,"owners_count":20910836,"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":["bar","menu","nav","navbar","navigation","vue","vue2","vue3","vuejs"],"created_at":"2024-09-24T20:01:01.918Z","updated_at":"2025-10-25T06:45:42.850Z","avatar_url":"https://github.com/johndatserakis.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Menu"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://johndatserakis.github.io/vue-navigation-bar/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"./src/assets/images/lockup-color.png\" width=\"200\" style=\"max-height: 100px;\" alt=\"vue-navigation-bar\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# vue-navigation-bar\n\nA simple, pretty navbar for your Vue projects.\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-navigation-bar\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-navigation-bar.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-navigation-bar\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-navigation-bar.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjohndatserakis%2Fvue-navigation-bar\u0026text=Check%20out%20vue-navigation-bar%20on%20GitHub\u0026via=johndatserakis\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/johndatserakis/vue-navigation-bar.svg?style=social\" alt=\"Tweet\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Vue 3 Support\n\nVue 3 is supported from `v5.0.0` and beyond (current `master`). To use `vue-navigation-bar` with Vue 2, use `v4.1.0`.\n\n## Links\n\n- [Demo](https://johndatserakis.github.io/vue-navigation-bar/)\n- [View on GitHub](https://github.com/johndatserakis/vue-navigation-bar)\n- [View on npm](https://www.npmjs.com/package/vue-navigation-bar)\n\n## Install\n\n```bash\nyarn add vue-navigation-bar\n```\n\nOr you can include it through the browser at the bottom of your page along with the css:\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-navigation-bar/dist/vue-navigation-bar.min.js\"\u003e\u003c/script\u003e\n\n\u003clink\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://unpkg.com/vue-navigation-bar/dist/vue-navigation-bar.css\"\n/\u003e\n```\n\n## Usage\n\n```js\nimport { createApp } from 'vue';\nimport VueNavigationBar from 'vue-navigation-bar';\nimport 'vue-navigation-bar/dist/vue-navigation-bar.css';\n\nconst app = createApp(App);\n\napp.component('vue-navigation-bar', VueNavigationBar);\n```\n\n## About\n\nOften when starting a new project I like to get together the main foundation pieces first. A main part of that process is working on the main navbar.\n\nThis component is meant to help with that process - it gives you a standard looking navigation bar for for your app that can be easily defined using `JSON` or a just an array of objects.\n\n`vue-navigation-bar` is meant to be used for the 80% of cases that exist when you need a standard navbar for your app/website. The layout has the `brand-image` anchored on the left side, and two slots for `menu-options` that push and pull based on designation.\n\nI know there are lots of other styles that navbar's can be, for instance the `brand-image` could be in the middle - but this component won't be allowing you to do that at the moment - so if that's your thing then I would probably look to roll out something on your own, or fork this to apply to your needs if possible. That being said, the actual `css` here is very easy to override - I'm using `BEM` with `SASS` ( `.scss` ) and have the style skeleton posted below - so you should be able to style it quite nicely without issue. I've put a lot of time in placing sensible defaults that should work well against any style.\n\nThe trade-off is that the initialization and usage of this component is very easy and won't force you to do anything except declare the structure initially and declare a few `css` styles as necessary.\n\n`vue-navigation-bar` is compatible with both `vue-router` projects and non- `vue-router` projects - just make sure to pass in `true` for the `isUsingVueRouter` option if you're using `vue-router`.\n\nThe component will work well with frontend component frameworks. I'm using Bootstrap 4 in the demo page and have it sitting in a container - that helps keep it from stretching too far across the page - although that may be the style you're going for, so have at it.\n\n## Usage Example\n\n```javascript\n\u003ctemplate\u003e\n  \u003cvue-navigation-bar :options=\"navbarOptions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport brandImage from '../src/assets/images/lockup-color.png'\n\nexport default {\n    ...\n    data() {\n      return {\n        navbarOptions: {\n          elementId: \"main-navbar\",\n          isUsingVueRouter: true,\n          mobileBreakpoint: 992,\n          brandImagePath: \"./\",\n          brandImage,\n          brandImageAltText: \"brand-image\",\n          collapseButtonOpenColor: \"#661c23\",\n          collapseButtonCloseColor: \"#661c23\",\n          showBrandImageInMobilePopup: true,\n          ariaLabelMainNav: \"Main Navigation\",\n          tooltipAnimationType: \"shift-away\",\n          tooltipPlacement: \"bottom\",\n          menuOptionsLeft: [\n            {\n              type: \"link\",\n              text: \"Why Dunder Mifflin\",\n              arrowColor: \"#659CC8\",\n              subMenuOptions: [\n                {\n                  isLinkAction: true,\n                  type: \"link\",\n                  text: \"About\",\n                  subText: \"Stupid corporate wet blankets. Like booze ever killed anyone.\",\n                  path: { name: \"about\" },\n                  iconLeft: '\u003ci class=\"fa fa-star fa-fw\"\u003e\u003c/i\u003e'\n                },\n                {\n                  type: \"hr\",\n                },\n                {\n                  type: \"link\",\n                  text: \"Locations\",\n                  subText: \"You\\'re a presentation tool!\",\n                  path: { name: \"locations\" },\n                  arrowColor: \"#659CC8\",\n                },\n                {\n                  type: \"hr\",\n                },\n                {\n                  type: \"link\",\n                  text: \"Blog\",\n                  subText: \"I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.\",\n                  path: { name: \"blog\" }\n                },\n              ]\n            },\n            {\n              type: \"link\",\n              text: \"Contact\",\n              subMenuOptions: [\n                {\n                  type: \"link\",\n                  text: \"Customer Service\",\n                  path: { name: \"customer-service\" },\n                },\n                {\n                  type: \"link\",\n                  text: \"Accounting\",\n                  path: { name: \"accounting\" },\n                },\n                {\n                  type: \"hr\",\n                },\n                {\n                  type: \"link\",\n                  text: \"Reception\",\n                  path: { name: \"reception\"},\n                  iconLeft: '\u003csvg id=\"i-telephone\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" fill=\"none\" stroke=\"currentcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\u003e \u003cpath d=\"M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z\" /\u003e \u003ccircle cx=\"16\" cy=\"21\" r=\"4\" /\u003e \u003c/svg\u003e',\n                },\n              ]\n            },\n            {\n              type: \"link\",\n              text: \"Pricing\",\n              path: { name: \"pricing\"},\n              iconRight: '\u003ci class=\"fa fa-long-arrow-right fa-fw\"\u003e\u003c/i\u003e',\n            },\n          ],\n          menuOptionsRight: [\n            {\n              type: \"button\",\n              text: \"Signup\",\n              path: { name: \"signup\" },\n              class: \"button-red\"\n            },\n            {\n              type: \"button\",\n              text: \"Login\",\n              path: { name: \"login\" },\n              iconRight: '\u003csvg id=\"i-arrow-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" fill=\"none\" stroke=\"currentcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\u003e \u003cpath d=\"M22 6 L30 16 22 26 M30 16 L2 16\" /\u003e \u003c/svg\u003e'\n            }\n          ]\n        }\n      }\n    }\n    ...\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n  .vnb {\n    .button-red {\n      background: #ff3b30;\n\n      \u0026:hover {\n        background: darken(#ff3b30, 10%);\n      }\n    }\n  }\n\u003c/style\u003e\n```\n\n## Notes\n\nAbove is a basic usage example. You'll see that a lot of the work is actually just declaring your `options` object.\n\nIn the style section you'll see that I provide a button class to color a button in the navbar. This is done like this to give you the most control over the button color and other pseudo properties. In this case, I want one of my buttons to be red, so I provide a class in my `options` object and then style the class appropriately like this:\n\nNote - the first example uses basic `css` , the second example is the same thing just using `sass` nesting - same result.\n\n```css\n.vnb .button-red {\n  background: #ff3b30;\n}\n\n.vnb .button-red:hover {\n  background: #fc0d00;\n}\n```\n\n```scss\n.vnb {\n  .button-red {\n    background: #ff3b30;\n\n    \u0026:hover {\n      background: darken(#ff3b30, 10%);\n    }\n  }\n}\n```\n\nYou can make a bunch of button-color classes and set them up just like above.\n\nTake a look at the `./example` folder in this project - it has the complete working example that you see in the demo.(FYI - the `vue-router` setup there is really rudimentary so all the different pages aren't real - doesn't affect the demo.)\n\nYou may need to adjust your `brand-image` a bit - that's normal as brand images come in different shapes and sizes - go ahead and set a `max-width` or `max-height` in pixels using this selector: `.vnb__brand-image-wrapper__link__image` . Even a little margin may help. For instance, the base I have it at is `max-height: 34px;` - should work for most cases.\n\nSometimes you may want your links to perform an action instead of following a link. To do this, add the `isLinkAction` property to your `menuOption` and it'll `emit` the `vnb-item-clicked` event with the `text` property of the `menuOption` . This will suppress the `path` option so the link no longer goes anywhere, but instead just sends the event. Checkout the example page to see this in action.\n\n### Props\n\n| prop                                     | type             | required | default           | possible values                                      | description                                                                                                                                                                                                                                                                                      |\n| ---------------------------------------- | ---------------- | -------- | ----------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| elementId                                | String           | no       | A generated uuid  |                                                      | This value will be set as the `id` of the instance                                                                                                                                                                                                                                               |\n| isUsingVueRouter                         | Boolean          | no       | false             |                                                      | If you want to use vue-router, set this to true and all links will automatically be `\u003crouter-link\u003e\u003c/router-link\u003e`                                                                                                                                                                                |\n| mobileBreakpoint                         | Number           | no       | 992               |                                                      | Width at which the navbar turns into the mobile version                                                                                                                                                                                                                                          |\n| brandImagePath                           | String or Object | no       | '/'               |                                                      | Link path of menu-option. If you have `isUsingVueRouter === true`, then this needs to be an `Object` with a `name` property or just a `String` of your path. Otherwise, just provide a `String`. link                                                                                            |\n| brandImage                               | Image            | no       |                   |                                                      | `import` your image here to use your brand image                                                                                                                                                                                                                                                 |\n| brandImageAltText                        | String           | no       | 'brand-image'     |                                                      | The `alt` tag text for your brand image                                                                                                                                                                                                                                                          |\n| collapseButtonImageOpen                  | Image            | no       | A hamburger icon  |                                                      | `import` your image here                                                                                                                                                                                                                                                                         |\n| collapseButtonImageClose                 | Image            | no       | A times icon      |                                                      | `import` your image here                                                                                                                                                                                                                                                                         |\n| collapseButtonOpenColor                  | String           | no       | `#373737`         |                                                      | CSS hex - `#FFF`. Only applicable if you don't supply a `collapseButtonImageOpen`.                                                                                                                                                                                                               |\n| collapseButtonCloseColor                 | String           | no       | `#373737`         |                                                      | CSS hex - `#FFF`. Only applicable if you don't supply a `collapseButtonImageClose`.                                                                                                                                                                                                              |\n| showBrandImageInMobilePopup              | Boolean          | no       | false             |                                                      | If you want to show your brand logo in the mobile popup                                                                                                                                                                                                                                          |\n| ariaLabelMainNav                         | String           | no       | 'Main Navigation' |                                                      | The `aria-label` value for the main navbar element                                                                                                                                                                                                                                               |\n| tooltipAnimationType                     | String           | no       | 'shift-away'      | 'shift-away', 'shift-toward', 'scale', 'perspective' | See [tippy.js docs](https://atomiks.github.io/tippyjs/all-options/)                                                                                                                                                                                                                              |\n| tooltipPlacement                         | String           | no       | 'bottom'          | 'top', 'bottom', 'left', 'right' ... and more.       | See [tippy.js docs](https://atomiks.github.io/tippyjs/v6/all-props/#placement) for the complete list. Also, make sure to cross reference with popper.js's options. The tooltip dropdown will always drop in the direction you set here.                                                          |\n| menuOptionsLeft                          | Object           | no       | {}                |                                                      | Menu options that will be _pulled_ to the left towards the `brand-image`                                                                                                                                                                                                                         |\n| menuOptionsLeft.type                     | String           | yes      |                   | 'link', 'button', 'spacer', 'dropdown'               | What type of link will this menu-option be? `link` will be a link, `button` will be a button, `spacer` will be a spacer with a width of `30px` , `dropdown` will create a dropdown on desktop and a `ul/li` list on mobile. `dropdown` only works on menuOptions, not subMenuOptions.            |\n| menuOptionsLeft.text                     | String           | yes      |                   |                                                      | Text of menu-option                                                                                                                                                                                                                                                                              |\n| menuOptionsLeft.path                     | String or Object | no       |                   |                                                      | Link path of menu-option. If you have `isUsingVueRouter === true`, then this needs to be an `Object` with at least a `name` property or just a `String` of your path. Otherwise, just provide a `String`. Not applicable to `dropdown` menuOption types. Do not use when setting `isLinkAction`. |\n| menuOptionsLeft.arrowColor               | String           | no       |                   |                                                      | CSS hex - `#FFF`. This styles the little chevron icon.                                                                                                                                                                                                                                           |\n| menuOptionsLeft.class                    | String           | no       |                   |                                                      | Only for `menuOptionsLeft.type === 'button'` - provide a class name so you can style your buttons                                                                                                                                                                                                |\n| menuOptionsLeft.isLinkAction             | Boolean          | no       | false             |                                                      | When `true`, any `path` option of the `menuOption` will not fire - instead, you'll be able to register for the `@vnb-item-clicked` event which will spit you out the `text` value of your `menuOption` . That way, you can do an action you may want to trigger.                                 |\n| menuOptionsLeft.iconLeft                 | HTML String      | no       |                   |                                                      | Only for `menuOptionsLeft.type === 'link or menuOptionsLeft.type === 'dropdown'`. HTML string of the icon you want to use. See more info on the `Icon` section of the README.                                                                                                                    |\n| menuOptionsLeft.iconRight                | HTML String      | no       |                   |                                                      | Only for `menuOptionsLeft.type === 'link or menuOptionsLeft.type === 'dropdown'`. HTML string of the icon you want to use. See more info on the `Icon` section of the README.                                                                                                                    |\n| menuOptionsLeft.subMenuOptions           | Object           | no       |                   |                                                      | Sub-menu-options that will be shown                                                                                                                                                                                                                                                              |\n| menuOptionsLeft.subMenuOptions.type      | String           | yes      |                   | 'link', 'hr'                                         | What type of link will this sub-menu-option be? `link` will be a link, `hr` will be a `hr` spacer                                                                                                                                                                                                |\n| menuOptionsLeft.subMenuOptions.text      | String           | yes      |                   |                                                      | Text of sub-menu-option                                                                                                                                                                                                                                                                          |\n| menuOptionsLeft.subMenuOptions.subText   | String           | no       |                   |                                                      | Sub text of sub-menu-option                                                                                                                                                                                                                                                                      |\n| menuOptionsLeft.subMenuOptions.path      | String           | no       |                   |                                                      | Link path of sub-menu-option                                                                                                                                                                                                                                                                     |\n| menuOptionsLeft.subMenuOptions.iconLeft  | HTML String      | no       |                   |                                                      | HTML string of the icon you want to use. See more info on the `Icon` section of the README.                                                                                                                                                                                                      |\n| menuOptionsLeft.subMenuOptions.iconRight | HTML String      | no       |                   |                                                      | HTML string of the icon you want to use. See more info on the `Icon` section of the README.                                                                                                                                                                                                      |\n| menuOptionsRight                         | Object           | no       | {}                |                                                      | Menu options that will be pushed to the right of the navbar. See above - all `menuOptionsLeft` apply                                                                                                                                                                                             |\n\n## Events\n\n| event                   | value                     | description                                                                                                                                                                         |\n| ----------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| vnb-mobile-popup-shown  | null                      | Emitted when the mobile popup is shown                                                                                                                                              |\n| vnb-mobile-popup-hidden | null                      | Emitted when the mobile popup is hidden                                                                                                                                             |\n| vnb-item-clicked        | String, `menuOption.text` | Emitted when a menu option is clicked. Listen to this event to then trigger a function based on the returned value, which is the `text` value of the `menuOption` that was clicked. |\n\n## Methods\n\n| method           | parameters | description            |\n| ---------------- | ---------- | ---------------------- |\n| closeMobilePopup |            | Close the mobile popup |\n| showMobilePopup  |            | Show the mobile popup  |\n\nNote - to call these methods set a `ref` on your `\u003cvue-navigation-bar /\u003e` , something like this: `\u003cvue-navigation-bar :ref=\"myNavbar\" /\u003e` . Then, manually call the methods like this in your javascript: `this.$refs.myNavbar.closeMobilePopup()` .\n\n## Slots\n\n| name           | description                                                                                                                                |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| custom-section | Use this to provide custom content in the navbar. Checkout the example code - in the commented-out section is an example search-bar setup. |\n\n## SCSS Structure\n\n```scss\n.vnb {\n  \u0026__brand-image-wrapper {\n    \u0026__link {\n      \u0026__image {\n      }\n    }\n  }\n\n  \u0026__menu-options {\n    \u0026--left {\n    }\n\n    \u0026--right {\n    }\n\n    \u0026__option {\n      \u0026__link {\n        \u0026:hover {\n        }\n\n        \u0026__icon {\n          svg {\n          }\n\n          \u0026--left {\n          }\n\n          \u0026--right {\n          }\n        }\n      }\n\n      \u0026__arrow {\n        \u0026--hover {\n        }\n      }\n\n      \u0026__button {\n        \u0026__icon {\n          svg {\n          }\n\n          \u0026--left {\n          }\n\n          \u0026--right {\n          }\n        }\n      }\n\n      \u0026__spacer {\n      }\n    }\n  }\n\n  \u0026__sub-menu-options {\n    \u0026__option {\n      \u0026__link {\n        \u0026:hover {\n        }\n\n        \u0026__icon {\n          svg {\n          }\n\n          \u0026--left {\n          }\n\n          \u0026--right {\n          }\n        }\n\n        \u0026__text-wrapper {\n          \u0026__text {\n          }\n\n          \u0026__sub-text {\n          }\n        }\n      }\n\n      \u0026__hr {\n      }\n    }\n  }\n\n  \u0026__collapse-button {\n    \u0026:hover {\n    }\n\n    \u0026__image {\n    }\n  }\n\n  \u0026__popup {\n    \u0026__top {\n      \u0026__image {\n      }\n\n      \u0026__close-button {\n        \u0026:hover {\n        }\n\n        \u0026__image {\n        }\n      }\n    }\n\n    \u0026__bottom {\n      \u0026__custom-section {\n      }\n\n      \u0026__menu-options {\n        \u0026__option {\n          \u0026:not(:last-child) {\n          }\n\n          \u0026__link {\n            \u0026:hover {\n            }\n\n            \u0026--no-highlight {\n              \u0026:hover {\n              }\n            }\n\n            \u0026__icon {\n              svg {\n              }\n\n              \u0026--left {\n              }\n\n              \u0026--right {\n              }\n            }\n          }\n        }\n      }\n\n      \u0026__sub-menu-options {\n        \u0026__option {\n          \u0026__link {\n            \u0026:hover {\n            }\n\n            \u0026__sub-text {\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.vnb-button {\n  \u0026:hover {\n  }\n}\n```\n\n## Icons\n\nSo right now to use icons in some of the options, you need to pass in full `HTML` strings which get rendered as `HTML` in the desktop version of the navbar.\n\nIn the demo I use this really great set of `svg` icons called [bytesize-icons](https://github.com/danklammer/bytesize-icons). You can just copy the `\u003csvg\u003e\u003c/svg\u003e` code and pass it in your initialization object. You can do the same thing with the FontAwesome style of `\u003ci class=\"fa fa-star\"\u003e\u003c/i\u003e` . In the future I'll be looking at a way to pass in full components as icons. Right now, passing in `svg` icons works well and does the job. Check out the `.example` folder to see how I have it in the demo.\n\n## Accessibility\n\nThroughout the development of this component I've been making sure to allow for proper a11y options to be set when possible. This means things like `aria-haspopup` and `aria-expanded` are set on the popup-menus, `aria-label` 's are set on the elements, and any user can come through and use the navbar nicely using the `tab` button. Of course there can probably be improvements on this front, so I'll keep an eye on it myself and look for any pull-requests that improve it.\n\n## Browser Support\n\nTo have this work with a browser like IE11, stick this at the bottom of your `index.html`\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js\"\u003e\u003c/script\u003e\n```\n\nOr, you can install `babel-polyfill` and import that in the main script of your app. You can read more about `babel-polyfill` [here](https://babeljs.io/docs/en/babel-polyfill). In the example folder I use the external script method.\n\n## Development\n\n```bash\n# Install dependencies\nyarn\n\n# Serve with hot reload\nyarn dev\n\n# Run the tests\nyarn test\n\n# Build demo page\nyarn build:example\n\n# Build library\nyarn build:library\n\n# Build everything and run tests\nyarn build\n```\n\n## TODO\n\n- [x] ~~Add an optional search input bar.~~ What I've done is add an optional `slot` named `custom-section` . Use this `slot` to add whatever custom content you want to show in the nav bar. In the demo, I have an example search bar shown. Look at the `./example` folder to check it out.\n- [ ] See if there's a way to let users pass a component for an icon and not be limited to HTML strings of the icon they want.\n- [ ] Add more thorough tests.\n- [ ] Add `prettier`, and `eslint` to the project. Pretty much mirror the settings from something like [this](https://github.com/johndatserakis/koa-vue-notes-web).\n- [ ] Fix the awful nesting job I did with the `SCSS` `BEM` nesting. I took the nesting way too far - really I should only need to go one level deep - maybe two. Anyways - I'll get to this soon - sorry about that until then. It's not anything too bad, but I've grown since then and realized the error in my ways ha.\n\n## Other\n\nGo ahead and fork the project! Submit an issue if needed. Have fun!\n\n## Thank You\n\nThank you to [Stripe](https://stripe.com/) for making that sick navbar - absolutely filthy. A lot of my styling is inspired by them - although I'm definitely butchering it. Also to [Bootstrap](https://getbootstrap.com/) - I've used Bootstrap and their navbar for many years and drew inspiration from lessons I've learned using it.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohndatserakis%2Fvue-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-navigation-bar/lists"}