OS Breadcrumb

OutSystems
Component
1

Navigation system that allows the user to locate himself within the structure of the website.

There are 4 layouts: default, black, white and yellow.

Libraries

NA

HTML Code












How to Implement

The breadcrumb component starts in the nav tag, and it must contain the aria-label = ”Breadcrumb” and the .os-breadcrumb class.


Within the nav, there should be an ordered list (ol) and in each li a link is placed that will direct the user to the respective page, except the last entry that corresponds to the current page.

The current page entry must contain a span with the attribute aria-current = ”page”.


For each version, except default, it is necessary to add classes in some elements:

  • Black Version:
    • Place the text-color-black class on the links (a)
  • White Version:
    • Place the text-color-white class in the nav tag and links (a).
  • Yellow Version:
    • Place the text-color-white class in the nav tag and link (a) the text-color-yellow class to the links.

This component supports the addition of existing classes to assign margin top and bottom, and the grid must be placed in the nav tag.


Tasks Front End

DMW-1297

Tasks Back End

NA

Tasks details

NA

Views Path

Component Variations

Default


How to use

Black Version


How to use

NA

White Version


How to use

NA

Yellow Version


How to use

NA

Undeveloped Options

NA

Example page

Figma Link