Here we've created an inline version of our Popup Nav, as are all of the examples, that uses basic navigation links. You could however take this, or any of the others and make the fixed positioned navigation items as well.

This example consists of navigation item links, as well as a Small Header and Divider too. We've also adjusted the animations for the toggle and popup a bit, as well as changed the toggle icon to a different preset.

Popup Nav provides you with the ability to insert a Drop Zone within the popup menu itself. This allows you to insert other Foundry-based tools within the popup. Here we've added an a simple WebP Image with our link items.

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Here you can choose whether you'd like the toggle for the Popup Nav to appear inline on the page where you place the tool, or whether you'd like to affix it in a permanent location within the browser window.

When using the Inline option you'll be given alignment options letting to set the alignment of the toggle at each of the 6 responsive breakpoints. This acts much liker aligning text.

Fixed mode lets you choose the location within the browser window where you'd like to display the toggle in a non-moving position. We offer a large variety of placements here. Additionally you'll have fields for setting an offset, or distance from the edge of the browser window. You'll be able to set a horizontal and verical offest, independent from one another.

Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to then choose one of the preset icon choices or choose Custom and type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites.

By default the Icon Library setting is set to None, which disables the icon.

Popup Nav's toggle button can be made to animate in various ways as the visitor interacts with it. We've given you say so on whether it animates or not, as well as how. Below you'll find controls for turing these on and off as well as fine tuning the animations.

When enabled the toggle button will scale in size when hovered over or clicked. You can choose one or both of these interactive animations.

This is te amount the toggle will scale when hovered over. The value defaults to 0.95, which would be 95% of its normal size. This means as the visitor hovers over the toggle it will get slightly smaller. You could have in increase in size by providing a value greater than 1, for example a value of 1.15 would mean the toggle would grow in size, scaling up to 15% larger than its original size.

This is te amount the toggle will scale when it is clicked on. The value defaults to 0.90, which would be 90% of its normal size. This means as the visitor clicks on the toggle it will get smaller. You could have in increase in size by providing a value greater than 1, for example a value of 1.20 would mean the toggle would grow in size, scaling up to 20% larger than its original size.

When enabled this feature will have the toggle rotate when clicked upon by the visitor. When clicked the toggle icon transforms into a Close icon, so this rotation can offer a nice transitional effect as the icon changes.

Allows you to customize how the toggle will rotate when clicked on. Then the navigation is closed the roatation option you've chosen is simply reversed.

Controls the length of your rotation animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation. When using Custom Animations you can set a duration for the animation process both as it animates in and as it animates out.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the navigation toggle button. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the navigation toggle button when the visitor hovers over it. You're also provided an option to choose a custom one-off color as well.

We provide a quick way to add a subtle light gradient over the toggle button when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the color of the icon within the navigation toggle button. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the color of the icon within the navigation toggle button when the visitor hovers over it. You're also provided an option to choose a custom one-off color as well.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

The toggle styling also allows for a circular setting here in the Rounder Corners setting, which is also the default option.

Used to add a decorative shadow to the toggle. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Here we choose the relative location of the popup itselt in relation to the toggle button when opens and closes the popup. You can choose from one of the following locations for the display of the popup. You may want to adjust this, especially when using the Fixed positioning options.

NOTE. Remember that these locations are relative to the location of the toggle button.

Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.

This allows you to set the minimum width of the popup menu. The popup will never get smaller than this. This min-width is applied to all 6 responsive breakpoints.

By clicking small + icon above this setting you will open up the ability to set a different min-width at each of the 6 breakpoints independently.

Choose from one of these presets for an eye-catching animation that will be applied to the popup navigation when it is triggered by the toggle button. This animation is applied as the popup animates into existance. Each can be customized by changing the their duration and easing.

Controls the length of your animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation. When using Custom Animations you can set a duration for the animation process both as it animates in and as it animates out.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

Choose from one of these presets for an eye-catching animation that will be applied to the popup navigation when it is triggered by the toggle button. This animation is applied as the popup animates out, closing the popup. Each can be customized by changing the their duration and easing.

Controls the length of your animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation. When using Custom Animations you can set a duration for the animation process both as it animates in and as it animates out.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the the popup menu itself. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the links within the the popup menu. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the links within the the popup when the visitor hovers over them. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the links within the the popup when the visitor hovers over them. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the small headers, if you've used any, within the popup menu. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the divider lines, if you've used any, within the popup menu. You're also provided an option to choose a custom one-off color as well.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Here you can adjust the alignment of the text links within the popup menu. By default they're all uniformly set aligned left. You can click the small + icon about this setting, which will present you with controls for changing this alignment at each of the 6 responsive breakpoints indvidually.

Enabling this feature adds a decorative pointer arrow to the popup menu. The pointer arrow points from the popup itself to the toggle button and will change its direction and orientation automatically depending on the popup location setting. This is enabled by default.

Used to add a decorative shadow to the popup menu. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.