1

I've got a toolbar that displays the current context's title in breadcrumb navigation links and has a set of buttons to perform actions on the displayed context.

The title is going to vary in width which means that the buttons will change position as they are butted up against the title as demonstrated in the picture:

Example of varying width title affecting button placement

My first instinct is to move the buttons to the right side of the menu but a hunch tells me that users expect left-aligned buttons.

Stacking the title on top of the buttons is less appealing as it will take up more vertical room but I'm leaning towards making that work.

There are not more than 5 buttons per menu at the moment.

Any ideas on how to improve this without sacrificing too much vertical space?

1

Menus are usually anchored on the top left

For most applications, menus are there to provide a simple and predictable entry point for users to access application features.

It's therefore important that the menu appear in a predictable position. This is especially true for menus in the File Edit ... format where users instantly recognize this idiom and expect it to be on the top left of the application window.

Unless you have a really special need to place the breadcrumbs before the menu (i.e. users are 10x more likely to use the breadcrumbs than the menu), I would not place it on the left.

The conventional place to put breadcrumbs is below the menu, so that navigation is not confused with other menu operations, as in example A below. But if you really need to place it in the menu bar, then consider placing it on the right, as in B below.

menu

You can use ellipses to truncate the breadcrumbs as this is a common practice for constraining long text (e.g. long pathnames in a file system).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.