SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Should a top level navigation link be clickable if it has a drop down?

    On your main Nav bar you have "About Us". And when you hover over it, it goes to a drop down menu showing "Company Blog".

    From a user perspective, is Company Blog the only thing that you can go to? Or does the average user know you can also click on the main About Us link above it, to go to an about us page?

    Or should I just make it foolproof and under the About Us nav, include a link for About Us and Company Blog?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I make my top-levels clickable simply because there could be any reason the dropdown either doesn't work, or the user has a difficult time selecting it (I try to fix this with some JS but I can't guarantee the user has excellent control of a pointing device, or isn't using a touch screen).

    Having the top-level be a link to some page offering any sub categories is pretty safe.

    Though according to some UX ARIA standards I was reading recently, which suggests what users should be building "widgets" like accordions and tab panels to do, the top-levels are only controls and hitting ENTER would "open" them. Uh, this os the page I was reading.

    But I'm uncomfortable with that page's recommendations for a few reasons, one of them being that ARIA is not available to sighted keyboarders and not all AT (esp not old AT). So the last mega-menu I did, each Tab moved forward one obvious menu item, SHIFT-TAB went back one, and since the dropdown appeared (though not in all browsers! IE7/8 wouldn't show), down/right arrow cycled forward in the submenu items, while up/left arrow cycled backwards. Another Tab brought you to the next main-menu item or, at the end, out of the menu entirely and you'd continue tabbing through the rest of the page like normal.

    In any case, if you decide *not* to make the About Us a link, use every Javascript trick you know of to make the dropdown available to everyone, and test in all browsers, test with keyboard-only, test on a tablet or touchscreen laptop, and if you grab some demos, some screen readers. Also, find some old person you know who's still uncomfortable with computers and ask them to find information about the company from the main page, and see if they manage to find Company blog without trouble (be aware lots of people would gravitate to About Us when looking for contact info).

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I make my top-levels clickable simply because there could be any reason the dropdown either doesn't work, or the user has a difficult time selecting it.
    Spot on. The top-level headings should be clickable and take you to a relevant page that has all the sub-links within that category visible on the screen at all times. That may be done through juggling the main navigation menu or they could be within the main body of the page – either way is fine, but you need to make it possible for people to browse to every page on the site without using the drop-down menus, because no matter how carefully you set them up, there will always be people who can't access them, whether it's for technical, physical or cognitive reasons.

    It's good practice to have a hierarchy of pages, so that each category has its own top-level page as well as all the sub-pages in it. This helps people to find related content and to navigate their way around the site.

  4. #4
    SitePoint Member
    Join Date
    Mar 2014
    Location
    Miami, FL
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a user, I find that clickable top levels just feel a lot easier to use. Clicking always makes the menu feel robust for some strange reason.

    I hate having to hover over a menu to find out that it's broken.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There's some UX research I ran into long ago supporting that idea-- that stuff shouldn't appear on a user action as indeterminate as a mouse hover, and that clicking something is a more obvious and clear action.

    However I can't think of an easy/useful/understandable way to have a top-level menu item clickable both to a new page *and* to open a dropdown. The advice I mentioned reading earlier, which recommended using ENTER as the user's way of activating the dropdown, is pretty much the same as click-- both would prevent someone from using the click to access another page, meaning the dropdown MUST always be available and MUST always work (even if you have a complete and open set of navigation in the footer, as many sites do, lots of users don't look there necessarily if a dropdown doesn't work).

    Having submenus appear onclick is also really the only way to work with touch devices, where hover doesn't exist.

    Again, though, the problem with click is you'd need something else as an option for users to click to get to submenu items if, for any reason, the submenu does not work for them or does not appear.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •