Balsamiq Community Discussion

Menu Bars - Sub menu items


#1

I feel like I am missing something obvious, but I can’t figure out how to implement a basic menu bar with sub menu items that only appear in Presentation mode, per:

https://support.balsamiq.com/ui101/menubars/

It seems like there was a static solution proposed, but that would cover up text on the page:

This also looks close, but I’m not clear how to do it:

Thanks,

Cliff


#2

Hi @cliffk3ll,

You need to implement two mockups for Collapsed and Expanded states of the menu, see the image:

To provide expanding behavior on click in Presentation mode, set the link to Expanded view in the Collapsed view, see the red arrow in the File item.

Balsamiq implements “between page” prototyping model, i.e. each state is designed on separate page. Other tools, like Axure RP, provide “within page”, or “layer prototyping” model, where the states can be implemented within the same page.

Still, you can use some ninja techniques in Balsamiq to convey the interaction on the same page, but the separate pages for each state is the easiest and straightforward way.


#3

Thanks, I will give it a try!


#4

I’m trying to create a 2-level menubar as symbol, to use on every page in the website. Presumably this is a very normal thing to do (we expect 700 screens if we do everything).

There’s no obvious way to “set the link to expanded view” as in the answer above.

Unfortunately there seems to be no documentation anywhere for creating submenus, as the user noted above.


#5

(I also wanted a search box on the top menu bar, which is mentioned in the menubar document, but I’m also unable to find documentation for it – it’s called an “extended header” in that doc.)


#6

@tjhorton, Implementing extended header is easy, just construct it and group.

As for linking to the expanded view, just set a link to the mockup in the property panel.


#7

Hi @tjhorton,

More information about our Linking feature can be found here. It requires to create one screen for each state you’d like to demonstrate.

Let us know if you need anything else. :slight_smile:


#8

Great info so far, though my original question was about creating submenus. Help needed. :slight_smile:


#9

Submenu is created by adding either (1) Menu Bar or (2) Menu control

image


#10

Thanks so much, I could see those controls, but how do you connect a submenu to a menu?

I’m hoping for standard menu functionality, where I click on File or Edit in your example, and a submenu appears. There’s nothing I can see in the doc about this, or that it’s not possible. Sorry if I’m missing something obvious. Perhaps you don’t support working submenus?

Second, if I set up this two-level menu as a symbol with links to various home pages (because the menu will appear on every page), will it work on every page? Or will links in the symbol for at least the first level menu work? Thanks so much, sorry again.


#11
  1. Excuse me for being unclear, you are right. There is no submenu support.
  2. The links in a symbol will work on every page

In your case the easiest way is:

  1. Create first level menu with links and save it as a symbol (Level 1). You can set / change the links later, and each of the instance will update. Links will work across your doc. You can override the selected item for each instance.
  2. Create submenu and save it as a symbol (Level 2). Display it when needed. Links will work across your doc. You can override the selected item.


#12

Thanks @Alexey_Kolchenko - you’re too fast :slight_smile:

By way of a little background @tjhorton, the menu controls are somewhat static but can, as shown above, offer interactivity via linking..

A more interactive menu control is more of a prototyping feature than a wireframing feature and the distinction can be a little subtle. There are a couple of documents which might help explain the distinction in context here:

Some customers will use the Markup feature to easily toggle controls visible/invisible for the purposes of quickly showing, for example, a submenu of a menu with a single click.

Hopefully, either Linking or Markup (or both) will meet your need here - get back to us if anything is unclear or you have additional questions, ok?


#13

Two amazingly good/useful responses, thanks guys!!! It’s a great tool, I love it, just expecting miracles. :slight_smile: