Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

SectionIndex

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Organizes the content of a screen, enabling quick navigation within the page.

    Use the Section Index to organize the content of a screen, enabling quick navigation. Related content is preferably grouped adjacent to each other.

    How to use

    Drag the SectionIndex pattern into the preview.

    It creates a link to every section you have on the page. The name of the link is based on the text you have in the Title placeholder of each section.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    IsSmooth If IsSmooth is true, the navigation to destination will animate. If set to false, it will navigate instantly. Boolean False False
    IsFixed If Fixed is true, SectionIndex will allways be in the same position within the screen. If set to false, it scrolls with the page content. Text False True
    TopPosition Set the top position when the SectionIndex is fixed. Just insert the number, the pixels unit will be added automatically. Integer False none
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    CSS Selectors

    Element CSS Class Description
    .section-index .section-index.is--sticky Defines if the SectionIndex position is fixed or not
    .section-index-item .section-index-item.is--active Defines the current active link

    Advanced Use Case

    Change active color

    1. Write the following CSS in the CSS editor and change the yourcolor.

      a.section-index-item.is--active { border-left-color: yourcolor; color: yourcolor; }

    2. Or using CSS variables: var(--color-yourcolor).

      a.section-index-item.is--active { border-left-color: var(--color-yourcolor); color: var(--color-yourcolor); }

    For RTL compatibility, make sure to also add the following code:

    `.is-rtl a.section-index-item.is--active {
        border-right-color: yourcolor;
        color: yourcolor;
    }`
    

    Notes

    Remember to use the Title placeholder in the Section pattern, as this will define the text for each SectionIndex link.

    Device Compatibility

    In Internet Explorer position: fixed is used instead of position sticky, as the latter is unsupported.

    Compatibility with other Patterns

    Only works with Section Pattern in the same screen.

    • Was this article helpful?