Mini Navigation

Potion Pack addon stack

Build a one-level, miniature pop-out navigation for your pages, manually curating the navigation items.

  • Use fixed positioning to place navigation in areas around the page
  • Used absolute positioning in tandem with other stacks
  • Opt to use navigation labels or choose icons only
  • Style navigation differently for Dark Mode visitors
  • Style navigation and toggle to match the rest of your page
  • Choose from a huge selection of icons for your toggle and navigation items
  • Smooth animation of nav items

Example

We have added two examples of the Mini Navigation to this page. One using Fixed positioning in the bottom right corner of the page. The other example is below using Absolute positioning in conjunction with the image below.

Using Mini Navigation

General

Dark Mode
When enabled you'll be given additional options throughout the Mini Navigation 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.

Toggle Icon

Opener Icon
Allows you to choose the icon that the visitor will see, and click on to open the navigation, revealing the navigation items.

Closer Icon
Select the icon that the visitor will see, and click on to close up the navigation, collapsing the navigation items.

Icon Color
Choose the color for your icon. This will affect both the Opener and Closer icons.

Background Style
Choose whether to use a Solid color or a Gradient for the background of the Toggle Icon.

Background
When the Solid Color Background Style is chosen you will be given two color pickers to adjust. One for the Normal toggle state and one for then the toggle is Hovered over.

Gradient
When the Gradient Background Style is selected you will be presented with four color pickers. The first two will be for the top and bottom colors of your gradient in the Normal state. The second two will be the top and bottom color of the gradient when the toggle is Hovered over.

Drop Shadow
Allows you to enable or disable the drop shadow for the Toggle Icon.

Labels

Show Labels
Allows you to choose whether you would like to include labels for each of the icons in the navigation.

Drop Shadow
Allows you to enable or disable the drop shadow for the Mini Navigation’s Labels. This includes the drop shadow under the associated icons as well.

Positioning

Location
The Location settings allow you to adjust where the toggle will be placed. These locations area applied to the toggle whether you’re using the Fixed or Absolute positioning. You can choose the top or bottom in conjunction with left or right.

Positioning
Allows you to choose between Fixed or Absolute positioning. Fixed positioning will place the toggle in one of the four corners of the webpage. Absolute positioning on the other hand will add a drop zone to the Mini Navigation stack. The toggle will be positioned around this drop zone and the content you place within the drop zone. Not every stack will work within this drop zone.

Offset Type
Allows you to choose between using either pixel or percentage based offset values.

Offset
Allows you to adjust the horizontal and vertical placement of the toggle. This value can be either a positive or negative value.

Nav Easing
Choose from one of two easing styles that will be used when animating the navigation items in and out.

Child Stack

Mini Nav Item

Link
Set the link for your navigation item. You can link to either an internal page or an external web address.

Icon
Choose the icon for the navigation item. You can select from a huge variety of icons.

Background Style
Choose whether to use a Solid color or a Gradient for the background of the navigation item icon.

Background
When the Solid Color Background Style is chosen you will be given two color pickers to adjust. One for the Normal toggle state and one for then the navigation item is Hovered over.

Gradient
When the Gradient Background Style is selected you will be presented with four color pickers. The first two will be for the top and bottom colors of your gradient in the Normal state. The second two will be the top and bottom color of the gradient when the navigation item is Hovered over.

Label
This is where you can add an optional text label to your navigation item.

Label Background
Set the normal and hover colors for the background of your navigation item.

Label Text
Set the normal and hover colors for the text of your navigation item.