johndatserakis/vue-navigation-bar

🧭 A simple, pretty navbar for your Vue projects.

vue-navigation-bar

A simple, pretty navbar for your Vue projects.

Vue 3 Support

Vue 3 is supported from v5.0.0 and beyond (current master). To use vue-navigation-bar with Vue 2, use v4.1.0.

Links

• Demo
• View on GitHub
• View on npm

Install

yarn add vue-navigation-bar

Or you can include it through the browser at the bottom of your page along with the css:

<script src="https://unpkg.com/vue-navigation-bar/dist/vue-navigation-bar.min.js"></script>

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/vue-navigation-bar/dist/vue-navigation-bar.css"
/>

Usage

import { createApp } from 'vue';
import VueNavigationBar from 'vue-navigation-bar';
import 'vue-navigation-bar/dist/vue-navigation-bar.css';

const app = createApp(App);

app.component('vue-navigation-bar', VueNavigationBar);

About

Often 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.

This 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.

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.

I 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.

The 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.

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.

The 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.

Usage Example

<template>
  <vue-navigation-bar :options="navbarOptions" />
</template>

<script>
import brandImage from '../src/assets/images/lockup-color.png'

export default {
    ...
    data() {
      return {
        navbarOptions: {
          elementId: "main-navbar",
          isUsingVueRouter: true,
          mobileBreakpoint: 992,
          brandImagePath: "./",
          brandImage,
          brandImageAltText: "brand-image",
          collapseButtonOpenColor: "#661c23",
          collapseButtonCloseColor: "#661c23",
          showBrandImageInMobilePopup: true,
          ariaLabelMainNav: "Main Navigation",
          tooltipAnimationType: "shift-away",
          tooltipPlacement: "bottom",
          menuOptionsLeft: [
            {
              type: "link",
              text: "Why Dunder Mifflin",
              arrowColor: "#659CC8",
              subMenuOptions: [
                {
                  isLinkAction: true,
                  type: "link",
                  text: "About",
                  subText: "Stupid corporate wet blankets. Like booze ever killed anyone.",
                  path: { name: "about" },
                  iconLeft: '<i class="fa fa-star fa-fw"></i>'
                },
                {
                  type: "hr",
                },
                {
                  type: "link",
                  text: "Locations",
                  subText: "You\'re a presentation tool!",
                  path: { name: "locations" },
                  arrowColor: "#659CC8",
                },
                {
                  type: "hr",
                },
                {
                  type: "link",
                  text: "Blog",
                  subText: "I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.",
                  path: { name: "blog" }
                },
              ]
            },
            {
              type: "link",
              text: "Contact",
              subMenuOptions: [
                {
                  type: "link",
                  text: "Customer Service",
                  path: { name: "customer-service" },
                },
                {
                  type: "link",
                  text: "Accounting",
                  path: { name: "accounting" },
                },
                {
                  type: "hr",
                },
                {
                  type: "link",
                  text: "Reception",
                  path: { name: "reception"},
                  iconLeft: '<svg 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"> <path 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" /> <circle cx="16" cy="21" r="4" /> </svg>',
                },
              ]
            },
            {
              type: "link",
              text: "Pricing",
              path: { name: "pricing"},
              iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
            },
          ],
          menuOptionsRight: [
            {
              type: "button",
              text: "Signup",
              path: { name: "signup" },
              class: "button-red"
            },
            {
              type: "button",
              text: "Login",
              path: { name: "login" },
              iconRight: '<svg 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"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
            }
          ]
        }
      }
    }
    ...
}
</script>

<style lang="scss">
  .vnb {
    .button-red {
      background: #ff3b30;

      &:hover {
        background: darken(#ff3b30, 10%);
      }
    }
  }
</style>

Notes

Above is a basic usage example. You'll see that a lot of the work is actually just declaring your options object.

In 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:

Note - the first example uses basic css , the second example is the same thing just using sass nesting - same result.

.vnb .button-red {
  background: #ff3b30;
}

.vnb .button-red:hover {
  background: #fc0d00;
}

.vnb {
  .button-red {
    background: #ff3b30;

    &:hover {
      background: darken(#ff3b30, 10%);
    }
  }
}

You can make a bunch of button-color classes and set them up just like above.

Take 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.)

You 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.

Sometimes 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.

Props

prop	type	required	default	possible values	description
elementId	String	no	A generated uuid		This value will be set as the id of the instance
isUsingVueRouter	Boolean	no	false		If you want to use vue-router, set this to true and all links will automatically be <router-link></router-link>
mobileBreakpoint	Number	no	992		Width at which the navbar turns into the mobile version
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
brandImage	Image	no			import your image here to use your brand image
brandImageAltText	String	no	'brand-image'		The alt tag text for your brand image
collapseButtonImageOpen	Image	no	A hamburger icon		import your image here
collapseButtonImageClose	Image	no	A times icon		import your image here
collapseButtonOpenColor	String	no	#373737		CSS hex - #FFF. Only applicable if you don't supply a collapseButtonImageOpen.
collapseButtonCloseColor	String	no	#373737		CSS hex - #FFF. Only applicable if you don't supply a collapseButtonImageClose.
showBrandImageInMobilePopup	Boolean	no	false		If you want to show your brand logo in the mobile popup
ariaLabelMainNav	String	no	'Main Navigation'		The aria-label value for the main navbar element
tooltipAnimationType	String	no	'shift-away'	'shift-away', 'shift-toward', 'scale', 'perspective'	See tippy.js docs
tooltipPlacement	String	no	'bottom'	'top', 'bottom', 'left', 'right' ... and more.	See tippy.js docs 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.
menuOptionsLeft	Object	no	{}		Menu options that will be pulled to the left towards the brand-image
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.
menuOptionsLeft.text	String	yes			Text of menu-option
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.
menuOptionsLeft.arrowColor	String	no			CSS hex - #FFF. This styles the little chevron icon.
menuOptionsLeft.class	String	no			Only for menuOptionsLeft.type === 'button' - provide a class name so you can style your buttons
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.
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.
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.
menuOptionsLeft.subMenuOptions	Object	no			Sub-menu-options that will be shown
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
menuOptionsLeft.subMenuOptions.text	String	yes			Text of sub-menu-option
menuOptionsLeft.subMenuOptions.subText	String	no			Sub text of sub-menu-option
menuOptionsLeft.subMenuOptions.path	String	no			Link path of sub-menu-option
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.
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.
menuOptionsRight	Object	no	{}		Menu options that will be pushed to the right of the navbar. See above - all menuOptionsLeft apply

Events

event	value	description
vnb-mobile-popup-shown	null	Emitted when the mobile popup is shown
vnb-mobile-popup-hidden	null	Emitted when the mobile popup is hidden
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.

Methods

method	parameters	description
closeMobilePopup		Close the mobile popup
showMobilePopup		Show the mobile popup

Note - to call these methods set a ref on your <vue-navigation-bar /> , something like this: <vue-navigation-bar :ref="myNavbar" /> . Then, manually call the methods like this in your javascript: this.$refs.myNavbar.closeMobilePopup() .

Slots

name	description
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.

SCSS Structure

.vnb {
  &__brand-image-wrapper {
    &__link {
      &__image {
      }
    }
  }

  &__menu-options {
    &--left {
    }

    &--right {
    }

    &__option {
      &__link {
        &:hover {
        }

        &__icon {
          svg {
          }

          &--left {
          }

          &--right {
          }
        }
      }

      &__arrow {
        &--hover {
        }
      }

      &__button {
        &__icon {
          svg {
          }

          &--left {
          }

          &--right {
          }
        }
      }

      &__spacer {
      }
    }
  }

  &__sub-menu-options {
    &__option {
      &__link {
        &:hover {
        }

        &__icon {
          svg {
          }

          &--left {
          }

          &--right {
          }
        }

        &__text-wrapper {
          &__text {
          }

          &__sub-text {
          }
        }
      }

      &__hr {
      }
    }
  }

  &__collapse-button {
    &:hover {
    }

    &__image {
    }
  }

  &__popup {
    &__top {
      &__image {
      }

      &__close-button {
        &:hover {
        }

        &__image {
        }
      }
    }

    &__bottom {
      &__custom-section {
      }

      &__menu-options {
        &__option {
          &:not(:last-child) {
          }

          &__link {
            &:hover {
            }

            &--no-highlight {
              &:hover {
              }
            }

            &__icon {
              svg {
              }

              &--left {
              }

              &--right {
              }
            }
          }
        }
      }

      &__sub-menu-options {
        &__option {
          &__link {
            &:hover {
            }

            &__sub-text {
            }
          }
        }
      }
    }
  }
}

.vnb-button {
  &:hover {
  }
}

Icons

So 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.

In the demo I use this really great set of svg icons called bytesize-icons. You can just copy the <svg></svg> code and pass it in your initialization object. You can do the same thing with the FontAwesome style of <i class="fa fa-star"></i> . 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.

Accessibility

Throughout 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.

Browser Support

To have this work with a browser like IE11, stick this at the bottom of your index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

Or, you can install babel-polyfill and import that in the main script of your app. You can read more about babel-polyfill here. In the example folder I use the external script method.

Development

# Install dependencies
yarn

# Serve with hot reload
yarn dev

# Run the tests
yarn test

# Build demo page
yarn build:example

# Build library
yarn build:library

# Build everything and run tests
yarn build

TODO

• 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.
• 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.
• Add more thorough tests.
• Add prettier, and eslint to the project. Pretty much mirror the settings from something like this.
• 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.

Other

Go ahead and fork the project! Submit an issue if needed. Have fun!

Thank You

Thank you to Stripe 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 - I've used Bootstrap and their navbar for many years and drew inspiration from lessons I've learned using it.

License

MIT

vue-navigation-bar's Issues

New vue-router Logic Breaks NuxtJS automated route configuration

Hey John,

Was just updating my app with the new 4.x version of the navbar and it's broken the way NuxtJS configures its routes. The way you have it set up its effectively requiring the user of the component to use named routes While it probably would work for whoever is installing this with a manually configured vue-router, if this is used with NuxtJS it breaks as NuxtJS generates the routes based on the directory structure.

I am gonna work up a small PR that I think should resolve it with an additional option to choose between path routes or named-routes.

Named Routes Reference: https://router.vuejs.org/guide/essentials/named-routes.html

Change brand image size

Hi,

I would like to know, is it possible to change brand image size?

        brandImagePath: "./",
        brandImage: require("../assets/example.svg"),
        brandImageAltText: "brand-image"

Tippy x-placement always set to 'top' - how do I change this?

Hi @johndatserakis - love the look of the navbar, nice work. The navbar will fit a project I'm working on perfectly, but when using your example implementation, the placement of the popups is always set to 'top'.

Obviously, this is not what you want from a dropdown navbar. Any idea why this would be happening?

Thanks for any help you can give... here's a screenshot:

so many menu items

Love your package. Nice menu. There is a small problem for feedback, that is, when there are more menu items, it will be extended until hidden, and the display is not ideal, do you understand what I mean?

The client-side rendered virtual DOM tree is not matching server-rendered content.

Problem

I'm having this error in my browser console:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

The navbar is visible but clicking links doesn't do anything.

Extra info

I'm using "vue-navigation-bar": "^2.0.0" in a Nuxt.js app.

In nuxt.config.js I have added:

export default {
  css: [
    'vue-navigation-bar/dist/vue-navigation-bar.css'
  ],
  plugins: [
    { src: '~/plugins/vue-navigation-bar', mode: 'client' }
  ]
}

~/plugins/vue-navigation-bar.js

import Vue from 'vue'
import VueNavigationBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavigationBar)

Use of component

<template>
  <div>
    <vue-navigation-bar :options="navbarOptions" />
  </div>
</template>

<script>
  export default {
    data () {
      return {
        navbarOptions: {
          elementId: 'main-navbar',
          isUsingVueRouter: true,
          mobileBreakpoint: 992,
          brandImagePath: './',
          brandImage: require('~/assets/logo.png'),
          brandImageAltText: 'brand-image',
          showBrandImageInMobilePopup: true,
          ariaLabelMainNav: 'Main Navigation',
          tooltipAnimationType: 'shift-away',
          menuOptionsLeft: [
            {
              isLinkAction: true,
              type: 'link',
              text: 'Over ons',
              path: '/overOns'
            }
          ]
        }
      }
    }
  }
</script>

Put a link in navigation bar to get bottom of page

If I set path to "#contact" where id "contact" is in my footer at the bottom of the page. This doesn't work, just URL gets appended by "#contact"

Nav links shown off screen on mobile. Also Nav does not close once opened on mobile

Nav links shown off screen on mobile. Also Nav does not close once opened on mobile

Can i add text between link in submenuoptions?

I want to give text on submenuoptions

Allowing action for submenu

@johndatserakis Besides having the function to navigate to certain paths, would you allow the submenu option to trigger action upon clicking? Maybe add an action field allowing function to trigger ?

can set subMenuOptions in subMenuOptions?

in my project,need to add more levels in my project

Please update it to Latest Vuejs v3 + TypeScript

Please update it to Latest Vuejs v3 + TypeScript

Button class removed in mobile mode (action button not working properly)

The logout button works fine in full screen mode, but when I reduce the screen the navbar collapses. In this collapsed mode the logout button is missing its class tag, and does not redirect the user .

This is the navbarOptions and menuOptionsRight:

 navbarOptions: {
        elementId: "main-navbar",  
        isUsingVueRouter: true,   
        mobileBreakpoint: 992,
        brandImagePath: "./",
        brandImage: require("../assets/windtech.png"),
        brandImageAltText: "brand-image",
        collapseButtonImageOpen: require("../assets/bars.png"),
        collapseButtonImageClose: require("../assets/times.png"),
        showBrandImageInMobilePopup: true,
        ariaLabelMainNav: "Main Navigation",
        tooltipAnimationType: "shift-away",
        menuOptionsLeft: [
  ...
        ],
        menuOptionsRight: [
          {
            type: "button",
            text: "Log out",
            path: "./",
            class: "logoutBtn",
            iconRight:
             <svg 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"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>,
          },
        ],

Using this method to fetch the button and add onclick event:

let logout = document.querySelector(".logoutBtn");
logout.onclick = async function signOut() {

The error message logged is : (Promise/async): "TypeError: Cannot set property 'onclick' of null"

Example is not working correctly on Vue2

Hello! I'm trying to use vue-navigation-bar as a component in my Vue2 project. I've installed through npm install [email protected] and tried the example code. However, the result is not what I expected:

Why is that happening? I've noticed that there are some ... in the example code, is there something else I have to add?

IE 11 support

could be great to have this compatibility support !

Adding external links to a button

How do I make the button click visit an external website link

How to use v-if or v-show to display and hide submenu ?

How to use v-if or v-show to display and hide submenu ?

Html in text of link?

Is it currently possible to add styles somehow to the text of a link?

So something like:

{
  type: 'link',
  text: 'Our <span style="color: #be0726">System</span>',
...
}

Thanks in advance!

Arrow Color

I'm struggling with something that seems like it should be simple, so I apologize if I'm missing something obvious

I've added a background a dark background color to the navigation bar, so now the chevron arrow is almost invisible

I changed the chevron-down.png in the package to be white, but it's not showing up as white in my project. Am I missing something?

Setup for nuxt 3.

Would it be possible to use with nuxt 3?

I created a plugins folder and a fie called vue-nav.js

import Vue from 'vue'
import navBar from 'vue-navigation-bar'

Vue.component('navBar', navBar)

This should auto register the component without me adding it to nuxt.config.

but in the template when i add nav-bar it doesn't seem to work.

Need named routes. Path returns relative urls

Can't named route be added instead of path? Vue router always returns the path relative to the current url.

..... { type: 'link', text: 'Centers', **path: "{name: 'shops'}"** },

router links with parameters

I am dynamically creating a dropdown menu and need to have params passed to the router-link.

Ive found in DynamicLink.vue the following code:

    return h(
      "router-link",
      { props: { to: { name: this.path.name } } },
      this.$slots.default
    );

This could accomodate params with:

    return h(
      "router-link",
      { props: { to: this.path } },
      this.$slots.default
    );

Then we could define the params like

path:{name:"this-route",params:{item:thisItem}

Forgive me if there another predefined way of doing this with vue-navigation-bar, I couldn't find one.

isLinkAction doesn't prevent the navigation to path.name

Hello,

I'm trying to use the isLinkAction: true option, and what I see is that it's triggering the event as expected but then it's navigating to the route defined with the required property path.name. Also, I've checked the demo page and it's working the same way

Documentation says:

Sometimes 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.

So me questions are:

• Is this a know issue?
• Is there any workaround to prevent this?

Alternatives:

• Do not make path.name a required property.
• Not only emit the menuOption.text value to the event handler function, but instead send the event and it can be prevented from outside with event.preventDefault()

Thanks

How to use vue navigation bar in Nuxt App

@vnb-item-clicked and text of item

Good package! Thanks for your work!

Sorry, I am not sure it is good idea use text to determine which menu item was pressed.

methods: {
    vnbItemClicked(text) {
      if (text === "About") {
        console.log("'About' was selected.");
        const element = document.getElementById("footer");
        element.scrollIntoView({
          behavior: "smooth"
        });
      }
    }
  }

It have to be some ID or NAME, but not text.

Please, could you add something like this as parameter for event handler.
But it will be better to have an option to attache handler for item.

External Links

Can I point the brand-image to an external url? If so, any guidance here?
By the way, so far this is one of the most vue libs that has helped me save some time and effort.

Possible height breakpoint?

Hi again, I just discovered an issue that if a user has a relatively small height for their browser (saw it on a friend's older laptop), and a sub-menu has several items in it (therefore it's height is greater than the screen height), the dropdown opens upwards (and is therefore not visible, since it opens up past the top of the screen). Is there a work-around for this?