Side Nav

Potion Pack addon stack

Build a manually curated, hidden, side navigation system for your pages that relies on beautiful iconography.

  • Use unique icons to help your navigation items standout
  • Set the width of your navigation bar when it is fully extended
  • Choose to include dividers between your navigation items
  • Add a logo and / or site title
  • Opt to use a drag-and-drop or remote image for your logo
  • Include a drop zone for other non-navigation related content as well
  • Use a variety of color pickers to style your navigation
  • Set the alignment of the navigation items and site title
  • Allows navigation items to scroll if they extend outside the area of the screen or device display area

Example

We’ve built a separate example page that includes the Side Nav stack for you to see how it works, so that it won’t get cluttered up with the other navigation already in use on the Documentation page.

Using Side Nav

General

Dark Mode
When enabled you'll be given additional options throughout the Side Nav stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

Title Section
You may opt to include a title section in your Side Nav stack. Doing so allows you to enter text to serve as your site title. This feature must be enabled for your site logo (configured below) to be seen as well.

Title Color
Allows you to set the color for your Side Nav's title.

Title Alignment
Choose how you wish for your site title within the Side Nav stack to be aligned when the navigation is open.

Logo
When the Title Section feature is enabled you may add a Logo to your Side Nav which will appear to the right of the Title. This Logo will be seen even when the Side Nav is closed.

Logo Type
When the logo feature is enabled you can choose to either use a drag-and-dropped image, or a remote image. If using a Remote Image you'll supply a URL to an image on your server to use as your logo.

  • Please Note: Your logo image file needs to be in a square shape.

Nav Width
Allows you to set the width of the Side Nav when it is fully opened.

Styling

Bar
Four color pickers that let you style the way the navigation bar is styled. You can set the color of the navigation bar background, its text, the icons and the icons’ backgrounds.

Bar Hover
Set the colors of the various navigation bar elements when they are hovered over.

Bar Active
Set the colors of the various navigation bar elements when they are the active element.

Include Dividers
Enable this feature to include thin divider lines between the navigation items. You can also choose the color of these divider lines using a color picker, when the dividers are enabled.

Icon Size
Set the size of the icons within the navigation items.

Icon Bkg Corners
Set the roundness of the corners of the icon backgrounds. This is visible when the icons have background colors applied to them.

Include Drop Shadow
Enabling this feature allows you to add a drop shadow to the Side Nav to separate it from the page a little bit.

Text

Alignment
Set the alignment of the text within the navigation items. You can choose from a left, center or right alignment.

Content

Include Content Drop Zone
Allows you to enable a drop zone within the stack that lets you add other stacks to the Side Nav below the navigation items. This content is only seen then the navigation bar is fully extended.

Child Stack

Nav Item

Label
This is the text that will be displayed as your navigation item within the stack.

Link
Add either an internal link to another page on your site or an external link to an outside web address to your navigation item.

Active
Allows you to mark a Nav Item as being the current active navigation link.

Icon
Allows you to choose form over 300 different icons for your Nav Item.

Custom Colors
Allows you to customize the colors for this particular Nav Item.

Child Stack

Spacer

You may opt to insert a spacer item between elements in your Side Nav. The Spacer child stack as no settings.

Insight
Logo

Use either a drag-and-drop image, or a remote image, for your site logo. Remember, for this stack the image file for your logo should be square.