Sidebar Navigation

This comprehensive guide will cover everything about the Sidebar Navigation element in Mokkup.

When to Use?

Sidebar Navigation adds a persistent left-hand navigation rail to a dashboard mockup. It lists the project's own screens as navigation items, so it doubles as a way to show how a multi-page dashboard or app is structured.

A Sidebar Navigation element is beneficial when:

• To wireframe a multi-page dashboard or app: The sidebar pulls in the project's Screens as navigation items, so stakeholders can see how the pages of a product connect to one another.
• To present navigation and information architecture: A styled nav rail with a logo and section header communicates the app's structure without needing a separate flow diagram.
• To design a collapsed or icon-only navigation rail: One of the built-in styles renders the sidebar as a slim, icon-only strip, useful for compact or collapsed navigation states.

How to Create?

Creating a New Project:

1. Click on ‘Create new’ from the home page
2. Set up the project by filling in the name and choosing the frame size
3. Drag & drop the Sidebar Navigation element onto the canvas, or click on it to add from the left menu
4. Resize it on the canvas and place it in the desired location
5. Edit it from the customize element menu, which opens on element selection

Using a Mokkup Template

1. Choose a template from the template library and click ‘Use Template’
2. Select the Sidebar Navigation element that needs modification
3. Resize it on the canvas and place it in the desired location
4. Edit it from the Customize Element menu, which opens on element selection

Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu. Adding a Sidebar Navigation element opens the Choose Style pop-up automatically.

How to Customize?

1. Details

Edit the basic sidebar details here.

• Title: Toggle on to show a section header (e.g. “Nav Header”) above the navigation list. An Edit Text field appears when this is on, letting you rename the header, plus an ‘Aa’ button to adjust its text style. Toggling it off removes the header text from the sidebar entirely.
• Primary Logo: Toggle on to show a logo placeholder at the top of the sidebar, with an ‘Add Image’ button to upload your own logo.

2. Properties

Contains the settings that control what appears inside the sidebar.

• Icon: Toggle on to add a small icon next to the section header (next to the Title text), with its own ‘Add Image’ button to upload the icon.
• Navigation Items: Toggle on/off to show or hide the list of navigation links. When on, the list is automatically populated from the project's own Screens. For example, adding a screen called ‘Screen1’ makes ‘Screen1’ appear as a navigation item, with the currently open screen shown in a highlighted/selected state.
• Navigation Icon: Toggle on to add an icon slot before each navigation item (as seen in the icon-led Variation styles).
• Button Style: Toggle on to render the navigation items as buttons rather than plain list rows.

3. Active Indicator

A dropdown that controls how the currently active navigation item is highlighted. Two options are available:

• Filled: Highlights the active navigation item with a solid background fill (the default).
• Side Bar + Tint: Highlights the active navigation item with a side accent bar and a light background tint instead of a solid fill.

4. Add-ons

This section holds five extra elements you can add alongside the navigation list: Collapsible, Secondary Image, Dropdowns, Text, and Highlighted Text. 

One thing to know: turning on the Collapsible toggle limits which of the other four Add-ons you can use at the same time. That's because a collapsed sidebar (icon-only, no text) doesn't have room to also show things like Text or Highlighted Text. 

5. Variation

This button opens the ‘Choose Style’ pop-up, the same one shown automatically when the element is first added.

6. Theme & Customizations

Click the ‘Theme & Customization’ icon in the floating toolbar above the element (or scroll down the left-side menu) to style this Sidebar Navigation on its own, without changing the rest of the dashboard.

Element Color Theme

Pre-fills the sidebar's logo area, header, navigation items, and footer from the project's Primary, Secondary, and Tertiary palettes, and lets you override any swatch or hex code for this element alone. ‘Reset to Default’ brings it back in line with the project theme.

Element Text

Style the sidebar's header, navigation item labels and any add-on text (filter titles, descriptive text), each with its own Font, Size, Style (Bold/Italic/Underline), Alignment and Color, plus ‘Reset to Default’.

Element Effects

Rounded Corners, Padding (independent inner spacing per side, plus overall outer padding), Element Color, Drop Shadow and Stroke for the sidebar container.

Mokkup allows various customization options for the Sidebar Navigation element. These options are present in the menu on the left side once the element is selected, and are grouped under Details, Properties, Active Indicator, Add Ons, Variation, and Theme & Customizations.

Note: As with other Mokkup elements, whichever change you make most recently is the one that sticks: if you customize this element's theme and then apply a new project-level theme, the project theme overrides the element's custom styling, and the reverse also holds true.

This was an in-depth introduction to using and editing the Mokkup Sidebar Navigation element. For additional inquiries, please ask our Chatbot or contact support.