The Button Sub-Navigation component allows authors to display a series of links as buttons arranged in a grid-like layout. Authors can specify the number of buttons, customize their text, links, optional anchor tags, and choose whether links open in the same or a new window. The component provides flexibility with options to adjust the number of buttons per row, the spacing between buttons, and the margin above and below the component. This component is useful when you need to present multiple navigation options in a visually distinct and organized manner, such as directing users to related sections or pages.

Example

Button Text 1
Button Text 2
Button Text 3

Content Options

  • Button Text: The text that will appear on the button. This should clearly describe the action or destination of the link (e.g., “Learn More” or “Contact Us”).
  • Link URL: The web address (URL) that the button will link to when clicked. This can be an external website or an internal page on your site.
  • Anchor (optional): An optional field to specify a section ID on the linked page. Use this if you want the button to navigate directly to a specific part of the page (e.g., #my-section-id).
  • Target (optional): Determines where the linked page will open. Options include “Same window” (default, opens in the same browser tab) or “New window” (opens the link in a new browser tab).

Layout and Styling Options

Warning This component is not fully compatible with dark-colored backgrounds at the moment. We are working to address this issue.

Buttons Per Row

Buttons Per Row: 2
Buttons Per Row: 2
Buttons Per Row: 3
Buttons Per Row: 3
Buttons Per Row: 3
Buttons Per Row: 4
Buttons Per Row: 4
Buttons Per Row: 4
Buttons Per Row: 4
Buttons Per Row: Expand
Buttons Per Row: Expand
Buttons Per Row: Expand
Buttons Per Row: Expand
Buttons Per Row: Expand

Gutter Width

Gutter Width: Small (default)
Gutter Width: Small (default)
Gutter Width: Small (default)
Gutter Width: Medium
Gutter Width: Medium
Gutter Width: Medium
Gutter Width: Large
Gutter Width: Large
Gutter Width: Large

Bottom Margin

Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large

the end

Top Margin

Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large

the end

Usage

Do

  • Use clear and descriptive button text to help users easily understand what each button does.
  • Limit the number of buttons to ensure the layout looks clean and organized.
  • Adjust the number of buttons per row to fit the content and maintain readability.
  • Keep the spacing options consistent with the overall design of the page.
  • Link buttons to relevant pages or sections that are closely related to the content.
  • Ensure all links are functional and lead to the intended destination.

Don't

  • Avoid using overly long button text, as it can disrupt the layout and make the buttons harder to read.
  • Do not cram too many buttons into a single row, as this can make the component appear cluttered.
  • Avoid using inconsistent text styles or tones across buttons, as it can confuse users.
  • Do not link buttons to irrelevant or unrelated pages, as it can frustrate users.
  • Refrain from using this component if only one button is needed; a standard button component might be more appropriate.
  • Avoid vague button labels like “Click Here” or “More” that don’t provide context.
  • Do not use this component on dark backgrounds until the compatibility issue is resolved.

Accessibility

  • Avoid using this component on dark backgrounds as the text becomes hard to read.