Content List Navigation Bar

Synopsis: The content list navigation bar is primarily used as an in page navigation associated with the Fiserv.com Insights section. The content list navigation bar includes a dropdown main label and up to three categories of links. Each category includes a category label and a list of links.

Content fields:

Dropdown Main label, Category labels, Filter labels, Filter links, Analytics Name.

Options:

Nav Bar Theme: Light/Dark

Link Color: Fiserv color palette

Link Color on Hover: Fiserv color palette

Background Color: Fiserv color palette

Category color: Fiserv color palette

Link Target: Same, New

Hide Category Label:(Check box)

Usage: Insights pages

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Nav Bar Theme - Light

Ingredients: Content List Navigation Bar

The Content List Navigation bar should be used on its own, outside of a container so that it expands full width. The dropdown will automatically align left with the Fiserv logo in the header. The bar responds to clicks anywhere on its surface to toggle between expanded and collapsed views.

The interface allows authors to customize the appearance of the content list navigation bar through four configurable color fields: Link Color, Link Hover Color, Background Color, and Category Color. These settings enable personalized styling of text elements and the expanded tab container.