Glide

Base Foundry stack

Create easy to navigate pages with the Glide stack’s smooth scrolling "one page" style navigation and smart links.

  • Style smart links to match your content
  • Add an unlimited number of smart navigation items
  • Add icons to your smart navigation
  • Control scrolling animation style
  • Insert dividers between navigation items
  • Configure smart link text alignment
  • Control offset for navigation items and content
  • Set navigation item widths based on breakpoints
  • Add content below navigation items
  • Include links to external pages
  • Adjust scroll threshold
  • Ability to display navigation items as plain links
  • Smart links hide automatically at the Mobile breakpoint

Example

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.

Using Glide

General

Offset
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.

Scroll Effect

Animation Type
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:

  • Standard
  • Ease Out
  • Explosive
  • Out and Back
  • Elastic
  • Bounce

Scroll Speed
Allows you to adjust the speed of the content as it scrolls into position when navigation items are clicked on.

Navigation Items

Nav Items
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.

Font v2
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.

Italic v2
When enabled your Navigation Items' text will be italicized.

Text Alignment
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.

Separate Items
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.

Border Radius
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.

  • Please Note: Glide Navigation Items are always hidden at the Mobile breakpoint to ensure that your content fits properly.

Navigation Content

Nav Content
Enabling this feature opens up a drop zone underneath the navigation items allowing you to insert additional content in that area.

Advanced

Scroll Threshold
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.

Adding Navigation & Content Sections

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.

  • Please Note: You always need the same number of navigation items in your Glide stack as you have content sections. We’ve built the Glide stack to number each of the navigation items and content sections in Edit Mode for you so that you can easily keep track of this.
Child Stack

Navigation Items

Navigation Items
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:

Label
Set the navigation item’s text label.

Icon
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.

Child Stack

Content Section

There are no additional features found in the Content Section child stack.

Insight
Simple is often better

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.