UI MarCom
2.4.0
Latest 2.4.0 2.3.0 2.2.1 2.1.0 1.0.12
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Date-Time-Picker Disclaimer Dropdown Feedback Module Figure Footer Header Hero Block Hotspots In-Page Navigation Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Multimedia Container Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Switch Tooltip User Identifier
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

In-Page Navigation Stable

In-Page Navigation is needed when there is extensive content on one page. The user can navigate to each chapter easily and the currently viewed chapter is highlighted in the in-page navigation.

Usage Code

    General guidance

    The In-Page Navigation is always visible and changes to a sticky top bar when it gets to the top end of the viewport. It can contain a call-to-action button that needs to be accessible from everywhere.

    In-Page Navigation usage sample on desktop
    In-Page Navigation usage sample on desktop

    Dos and don’ts

    • Do use the In-Page Navigation items only to navigate through chapters on a long page.
    • Do not use it when you need to switch between different views. For this use the similar-looking tabs component.