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.

The ARIA Label is brief description of the purpose of the navigation. By default this is set to "Main" to indicate that this is the main navigation for our page. We don't need to include the word navigation here as the browser already knows this is a navigational item.

You could use an ARIA label of "Secondary" as an example when applying it to a secondary navigation item on the page. Most times however this setting will not need to be changed.

Here you can choose which branding items you'd like to include in your navigation bar. The Navigation Bar tool offers the ability to add the Site's Title and / or Site Logo.

This is where you'll provide your site's title, or name, for the Navigation Bar's branding options. This text is only used if you've enabled the Site Title in the branding setting above.

Here we can define the font for the branding Site Title. 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.

Allows you to adjust the font weight for your Site Ttle text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

The Navigation Bar allows you to adjust the font size for your Site Title at each of the 6 responsive breakpoints. The defaults here are fairly standard and should meet most users needs.

Here you can select the units of measure you'd like to use when setting the font size for the Site Title, above.

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 Site Title text within the Navigation Bar's branding. You're also provided an option to choose a custom one-off color as well.

This slider lets you adjust the spacing between the individual characters within your site title text. The default value here is 0 (zero).

Foundry's Navigation Bar offers you three image styles for providing your site logo imagery. You can use the normal drag-and-drop methond, remote URLs, or WebP (also remote URL based, but with fallback images).

Depending on the mode you choose you'll be presented with different options for providing your logo image(s).

Provides you a way to add an ALT Tag to your image. The ALT tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by screen reader software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

This setting allows you to adjust the size of the logo image at each of the 6 responsive breakpoints. You'll set the width of the image, measured in Pixels (px), and the height will adjust proportionately. By default the logo is sized appropriately for the standard, default settings within Navigation Bar and most users will likely not need to adjust this.

Enabling this feature will allow you to add a link to your site's branding in the Navigation Bar. You'll be provided a setting with a link control where you can link the branding to the page you wish.

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 Bar itself. You're also provided an option to choose a custom one-off color as well.

This setting affects the normal background color. The Sticky Navigation has a separate background color setting elsewhere in the Navigation Bar preferences.

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.

Enabling this feature allows you to set a custom, fixed height for the Navigation Bar. When enabled you'll be given a field for adjusting its height, which is measured in Pixels (px). This custom height is disabled when the browser or device width is smaller than what you've chosen in the Mobile Below setting.

When enabled, if you're also using a Custom Height Sticky Navigation, the change in heights will have a smooth, slight animation applied for the transition.

Allows you to change the alignment of the Navigation Items. You can choose from left, center or right alignment, with the right setting being default. When using the center setting you'll most times want to disable the Site Title and Logo in the Branding settings as they will take up space on the left side of the navigation bar and offset the center aligned navigation items.

Here we can define the font for the navigation items. 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.

The Navigation Bar allows you to adjust the font size for your Navigation Items at each of the 6 responsive breakpoints. The defaults here are fairly standard and should meet most users needs. You can have them inherit the standard Navigation Bar settings or customize them to your liking.

You can adjust the custom sizing of the Navigation items uniformly across all 6 breakpoints or opt to adjust the individuall at each breakpoint.

Here you can select the units of measure you'd like to use when setting the font size for the Navigation Items, above.

Allows you to adjust the font weight for your normal, non-active navigation items. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

Allows you to adjust the font weight for your current, or active, navigation items. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

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 normal, non-active navigation items. 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 current, or active, navigation items. 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 current, or active, navigation items. You're also provided an option to choose a custom one-off color as well.

This setting allows you to set the roundness of the corners of the background of the navigation items. You can set each corner of the item(s) background independently.

The Navigation Bar allows you to specify at which breakpoint you'd like the mobile style navigation to appear. This allows you to adjust at what browser / device width your visitors will be presented with the more compact, mobile navigation.

By default this is set to the Medium breakpoint. The means starting at the Medium breakpoint width, and continuing through the Small and Extra Small breakpoints, the visitor will see your Mobile navigation.

The Extra Small breakpoint will always display the Mobile navigation, but you can adjust it so that other breakpoints also present the visitor with this Moblie navigation as well, adding more versatility to Navigation Bar.

Here you can choose the icon style used for the trigger toggle button that shows / hides the Mobile navigation. Navigation Bar offers a varietty of icons and styles to help you find the one that matches your design the best.

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 normal, non-active toggle icon. 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 active toggle icon. You're also provided an option to choose a custom one-off color as well.

When enabled some padding will be added to the toggle icon. This is most often used in conjunction with the Border Around Icon option to provide spacing between the icon and border.

Adds a deocrative border around the toggle icon when enabled. The border takes on the same styling as the icon itself.

Choose here which sides of the navigation bar that you'd like to apply a border to. You can choose any combination of the four sides that you like.

Let's you choose one of the 5 preset border widths for your border, when enabled.

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 navigation bar's border. You're also provided an option to choose a custom one-off color as well.

Used to add a decorative shadow to the navigation bar. 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.

This setting allows you to choose how you'd like for any drop down menus within your navigation to be triggered. You can set this to Click or Hover. Click will show the drop down menus when the visitor clicks on a parent item that is a drop down. The Hover option shows the drop downs when the visitor hovers over that parent item.

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 drop down menus. 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 border around the drop down menus. 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 normal, non-active drop down items. 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 active drop down items. 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 active drop down items. 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 any dividers that you've placed within the drop down. 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 any small header items that you've placed within the drop down. You're also provided an option to choose a custom one-off color as well.

Enabling this feature allows you to set a fixed minimum width for all drop down menus in your navigation bar. Be careful to not set this too high as it will mean the drop down may extend past the width of small screens.

Allows you to choose a separate font for drop down menus by choosing one of the Typeface options, which are setup in the Foundry 3 Typeface tool. This is applied to all drop downs.

Choose whether you want to have your drop down menus inherit the font size of your main navigation bar (default), or choose to apply a custom font sizing to your drop downs. This can be done uniformly for all breakpoints, or you can set an independent value for each of the responsive breakpoints.

These various setting groups will allow you to apply a constraint to the contents within the main navigation bar itself. These work very similarly to how the Max-Width tool works.

Here you'll determine how you'd like to apply the max-width constraints to the Navigation Bar's contents. We highly recommend using the default Easy Presets mode. If you find you need more granular control you can checkout the Custom and Advanced modes.

Active when the Mode is set to Easy Presets.

The Easy Presets option lets Foundry handle the max-width for the most part, making life easier on you. Here you'll choose at which breakpoint you want the contents to become fluid, spanning the entire width of the navigation bar. Anything at, or larger than the chosen breakpoint will be automatically confined to those particular breakpoint(s).

This setting defaults to Fluid at all Breakpoints. We find this covers the majority of use cases.

Active when the Mode is set to Custom.

The Custom mode allows you to select an overall, uniform maximum-width for your content within the navigation bar. Any time the width of the constrained navigation bar content falls below the chosen value the content will enter fluid mode and match the full-width of the navigatio bar itself.

You're also give a Units selector here to allow you to choose between Pixels (px), View Width (vw), Percentage (%) or Root EM (rem).

Active when the Mode is set to Advanced.

Advanced mode is a bit of a custom version of the Easy Presets mode. Here though you'll be able to define the maximum-wdith values at 5 of the responsive breakpoints (the Extra Small breakpoint is always fluid, or 100% width of the parent navigation bar container).

Additionally you can opt to turn each of those 5 breakpoints on, or off. When off that breakpoint will inherit then next smallest breakpoint in order, which is enabled.

When enabled, the Advanced Sizing Mode customizations are applied to the navigation at or above the "Mobile Below" setting.

When enabled the settings below will be applied to various items within the navigation bar. This allows a little bit finer control over these elements if desired.

Here you can add a padding to the top and bottom of the navigation bar itself. This padding is measured in Pixels (px).

Adjust the padding that is applied to each of the navigation bar items. Four fields are provided to allow you to independently adjust the padding on all four sides of the navigation items.

This setting allows you to add padding to the top and bottom of the optional vertical dividers in the navigation bar. This lets them appear inset from the edge of the navigation bar.

Here you can turn on Sticky Navigation for your navigation bar. Sticky Navigation ensures that the navigation bar will remain at the top of the browser window as your visitor scrolls down the page. If the navigation does not start at the top of the page, it will become "stuck" there once the navigation bar reaches the top of the page as they visitor scrolls downward.

This type of navigation is quite popular as it keeps the main navigation for the page in sight for the visitor no matter where they are on the page.

In Foundry's Navigation Bar tool enabling this setting also provides you with a great many alternate settings that allow you to style the navigation bar differently when it is stuck vs when it is unstuck. By default we've matched many of these "stuck" settings to the normal default unstuck settings to make customization natural and easy for you as you build out your navigation.

When enabled the Sticky Navigation setting sections below will become active and allow you granular control over styling the Sticky Navigation when "stuck."

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 Site Title text when the navigation bar is "stuck" using Sticky Navigation mode. You're also provided an option to choose a custom one-off color as well.

When enabled you may provide an alternate site logo in the drag and drop image wells provided. This alternate site logo will be shown when the navigation bar is "stuck" as a result of using Sticky Navigation mode.

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 bar itself when it is "stuck" using Sticky Navigation mode. You're also provided an option to choose a custom one-off color as well.

Here you can adjust the rounded corners of the Navigation Bar when it is "stuck" using Sticky Navigation mode. 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.

Enabling this feature allows you to set a custom, fixed height for the Navigation Bar when the navigation is "stuck" to the top of the browser window.. When enabled you'll be given a field for adjusting its height, which is measured in Pixels (px). This custom height is disabled when the browser or device width is smaller than what you've chosen in the Mobile Below setting.

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 normal, non-active navigation items when "stuck" using Sticky Navigation mode. 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 current, or active, navigation items when "stuck" using Sticky Navigation mode. 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 current, or active, navigation items when "stuck" using Sticky Navigation mode. 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 normal, non-active toggle icon when "stuck" using Sticky Navigation mode. 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 active toggle icon when "stuck" using Sticky Navigation mode. 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 border around the navigation bar when "stuck" using Sticky Navigation mode. 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 drop down menus when "stuck" using Sticky Navigation mode. 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 border around the drop down menus when "stuck" using Sticky Navigation mode. 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 normal, non-active drop down items when "stuck" using Sticky Navigation mode. 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 active drop down items when "stuck" using Sticky Navigation mode. 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 active drop down items when "stuck" using Sticky Navigation mode. 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 any dividers that you've placed within the drop down when "stuck" using Sticky Navigation mode. 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 any small header items that you've placed within the drop down when "stuck" using Sticky Navigation mode. You're also provided an option to choose a custom one-off color as well.

Used to add a decorative shadow to the navigation bar when "stuck" using Sticky Navigation mode. 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.

When enabled, the Advanced Sizing Mode customizations are applied to the navigation at or above the "Mobile Below" setting when "stuck" using Sticky Navigation mode.

When enabled the settings below will be applied to various items within the navigation bar. This allows a little bit finer control over these elements if desired. Will be applied when "stuck" using Sticky Navigation mode.

Here you can add a padding to the top and bottom of the navigation bar itself. This padding is measured in Pixels (px). Will be applied when "stuck" using Sticky Navigation mode.

Adjust the padding that is applied to each of the navigation bar items. Four fields are provided to allow you to independently adjust the padding on all four sides of the navigation items. Will be applied when "stuck" using Sticky Navigation mode.

This setting allows you to add padding to the top and bottom of the optional vertical dividers in the navigation bar. This lets them appear inset from the edge of the navigation bar.

Allows you to adjust the layering of elements using a custom z-index value.

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.