Create easy to navigate pages with the Glide stack’s smooth scrolling "one page" style navigation and smart links.
We've setup an separate example page for Glide here. We've separated it from this page for two reasons — to give it more space to show off what it can do, and because Glide will not work within the Partitions stack due to the way both stacks operate.
Determine the distance from the top of the browser window that the navigation items should appear. When a navigation item is clicked the content will also scroll to this same position. You can set them to be exactly the same, or you can set them independent of one another.
Set the style of the animation. This style is applied to the content as it scrolls into place. You can choose from the following animation types:
Allows you to adjust the speed of the content as it scrolls into position when navigation items are clicked on.
Define the colors for the navigation items. Glide provides color pickers for the Normal, Hover, and Current colors for both the background and text for the navigation items. You can also define the color of the dividers as well.
Tablet & Desktop Width
Define the width of the navigation items to work best with your layout. You can adjust them, setting different widths for the Tablet and Desktop breakpoints.
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Navigation Items.
Font Weight v2
Use this setting to adjust the font weight of your Navigation Items when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.
When enabled your Navigation Items' text will be italicized.
Allows you to set the justification of the Glide stacks navigation text. You can set the alignment to Left, Center or Right.
Bold Current Item
Enable to have the text of the current navigation item appear bolded.
By default the navigation items are grouped together in a nice looking block of items. Using the Separate Items feature breaks them apart into individual items.
Lets you define the radius for the rounded corners on the navigation items.
Nav Items as Plain Text
Remove all the frills and styling from the navigation items and display them as plain, everyday normal links.
Enabling this feature opens up a drop zone underneath the navigation items allowing you to insert additional content in that area.
Adjusting this slider determines how close to the top of the page a navigation content area has to get before it marks the related navigation item as being the current item.
Navigation items and content sections are added by clicking the small blue plus sign at the bottom of the stack. One column has a blue plus sign for the navigation items and another for the content sections.
In addition to navigation items, in the navigation column, you can also add dividers to breakup the layout of the navigation items.
Each navigation item child stack has options of its own:
Set the navigation item’s text label.
Include an icon alongside the text label in your navigation item. You have over 300 different icons to choose from.
Advanced: External Link
You can choose to assign a link to a navigation items instead of having it relate to a specific section in the Glide stack. This can be used to link to pages within your site or elsewhere on the web.
There are no additional features found in the Content Section child stack.
While many stacks will work inside of Glide, some just will not. This is due to the way Glide needs to be constructed. This also applies to parent stacks for Glide. Glide will work well inside of many stacks, but it will indeed be a problem if you try to place Glide in stacks like Partitions, Modal, Tabs or similar other stacks.