CLASSIC MENU WIDGETS

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

NAVIGATION MENUS

Classic menu widgets are used to build navigation menus. You can customize the number of top-level menu items and create sub-menus for each menu layer. Classic menu widgets are quick to use but fairly inflexible in terms of styling, and so are best suited to low-visual-fidelity prototypes in which the look and feel of the menus is not primarily important.

EDITING

ADDING AND REMOVING MENU ITEMS

When first added to the page, the classic menu has three top-level menu items. To add additional menu items, right-click one of the menu options and choose either "Add Menu Item After" or "Add Menu Item Before". To remove an option, right-click it and choose "Delete Menu Item".

ADDING AND REMOVING SUBMENUS

By default, the classic menu does not have any submenus, but you can add submenus to any menu item in a classic menu widget (including in nested layers). The submenus show and hide based on automatic interactive functionality built into the menu widget.

 

To add a submenu, right-click on the menu item and choose "Add Submenu". Three submenu items will be added. To remove an entire submenu, right-click on the top level menu item and click "Delete Submenu".

ADDING TEXT

Double-click a menu item of a classic menu widget to edit the text of that menu item. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a menu item, you can just begin typing while the menu item is selected.

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging. Drag a column or row border to resize that specific column or row.


Widgets and individual menu options can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or Style tab to set the widget or menu option's size in pixels. To constrain the widget’s proportions (not applicable to individual menu options), click the “Maintain aspect ratio” icon between the “w” and “h” fields.

STYLING

Editable properties of a menu widget's formatting include: text font and family; line, fill, and text colors; and border color and thickness. These properties can all be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.


Each menu option can have its own text and fill styling. Each menu option can have its own border color and thickness. Submenu items inherit their styling from the parent menu item when they are created, so it can be helpful to style the top-level menus before creating submenus.

PADDING

To edit the padding value for a menu, find the "Menu Padding" field in the Properties tab. Click the numerical value (by default, it's 0) to edit the menu padding. You can choose a value in pixels and choose whether or not to apply the change to submenus. Each submenu can have its own padding.

INTERACTIVITY

SHOWING AND HIDING MENU ITEMS

Submenus automatically show when the mouse cursor enters the parent item and hide when the mouse cursor leaves both the submenu and its parent item. To build menus that work differently, such as with clicking, learn how to make a custom navigation menu.

INTERACTION STYLES

Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked.

LINKS

The quickest way to add a link to a menu option is to select the menu option and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of target page to create the link and close the dialog. Learn more about creating interactions in our Interactions reference article.

LIMITATIONS & WORKAROUNDS

NOT ADAPTIVE

All aspects of menu widgets are consistent across all adaptive views. To style a menu differently across adaptive views, you can use shape widgets to make a navigation menu. You could also place a different menu in each adaptive view, "unplacing" from each view the menu widgets designed for other adaptive views.

Menu widgets can have the following interaction styles:


MouseOver: When the cursor moves over a widget

MouseDown: When the widget is clicked on but not yet released

Selected: When an interaction has set the widget to its selected state


All parts of a menu widget share the same interaction style.


In each scenario, the alternative look you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.


The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.