Close menu Resources for... William & Mary
W&M menu close William & Mary

Button Bar Row

The button bar row is a thin "bar-style" row that offers up to four buttons using a distinct set of color choices.

Rows are available to specified users that have received the required training, consultation and approval of their Cascade Manager.
Suggested Uses
  • Present a colorful collection of navigation links.
  • Highlight key links using minimal space on the page.
Create a New Row
  • Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
  • From the top menu, select Add Content > Rows > Button Bar.
Available Fields & Options
  • Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-button-bar. 
  • Title: Required field; used as a section header for screen readers and should be meaningful. The title is not displayed visually on a button bar row.
  • Bar Color: Select one of the available colors from the Button Bar Color Library. Elements within the row will be color-coordinated and optimized for design and accessibility. Note: When placing the row on a page, selecting an alternate theme will not change how the button bar row appears on that page.
  • Button Settings
    • The button bar row has a minimum requirement of one button and a maximum of four buttons. Use the green + to add a button. Use the up/down arrows or drag and drop to reorder them. 
    • Button Text: Required. Provide the text to appear on the button. Tip: The length of the text impacts the size of all buttons in the row — keep it short for an optimal appearance across devices.
    • Internal Link: Use to link the button to an available Cascade asset.
    • External Link: Use to link the button to an asset not available to you within Cascade.
    • Anchor: Use to specify an anchor for your internal or external link — no # symbol required. To link to an anchor located on the same page as the row, do not specify an internal or external link destination. New to anchors? Learn how to first create an anchor on your pages or rows. 

Tip: Button bar rows are not design to be stacked. Please avoid adjacent button bar rows.

Updating Row Content
  • To update the content of a row, edit and publish the row file. 
  • You do not need to publish the pages displaying the row.
  • If a row is unpublished or deleted, it will no longer appear on any live pages.

Tip: If you move or rename a row file, you will then need to publish any pages displaying the row. Not sure which pages are using the row? Check for relationships to the row.

Example Button Bar Rows

Below, we offer sample rows to demonstrate a selection of suggested uses and best practices.

Callout Row Dividing Sample Button Bars

This is a callout row separating the sample button bar row (above) from the sample button bar row (below). Button bar rows are not designed to be stacked adjacent to one another.

Callout Row Dividing Sample Button Bars

This is a callout row separating the sample button bar row (above) from the sample button bar row (below). Button bar rows are not designed to be stacked adjacent to one another.