Navigation Bar, mixing links and buttons

I am trying to create a navigation menu with 2 functions in it... the website 'page' navigation links and 'action' buttons... sort of like this image

the navigation would have links to the appropriate pages as well as 2 buttons, 'log activity' and 'create route'.

The buttons of course behave differently than the navigation. They are primary calls to action on the site. The 'log' button opens a form on the same page, the 'create route' button leaves the page.

Im wondering if there is a way to combine links and buttons without confusing the user, and if there is an appropriate way to go about it.

Please advise.


You've really answered your own question. They way to distinguish between them is to use text for navigation and buttons for calls to action. Many sites do that (including this one) and I've never seen anyone get them confused.

If you're worried about people not being sure that the text is navigation, just use a small marker or arrow to show the current page. It's not necessary, but it does improve discoverability.

Navigation Bar, mixing links and buttons

Just make sure that you don't mark the current page in the navigation by putting a block around it - this will make it look more like a button. You just have to be aware of not putting anything on the navigation which looks similar to a button but isn't one. The navigation below is an example of what not to use if you have a call to action button in your navigation. It's a good navigation bar if it is used without call to actions.

Navigation Bar, mixing links and buttons

Usually you'd have some kind of legend, at least as to how you're designing, that suggests button visual treatment means something different than text links. For example, while they're not mixed together form buttons usually indicate an action while text links indicate navigation.

Why would you mix them visually? Even if you feel they belong on the same horizontal or vertical plane in the UI, wouldn't you still separate them? Text links all aligned right and then the buttons aligned left ... Going way back, a rule of thumb I learned a long time ago, which I still feel is warranted, is that you keep navigation and control separate.

Christie, you're already on the right track but if you want to see another example of a global header containing 2 action buttons take a look at the English National Opera site.

Navigation Bar, mixing links and buttons

Category: buttons Time: 2011-11-08 Views: 1

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.183 (s). 12 q(s)