use-topbar

Creates standardized top navigation bars with breadcrumbs, tabs, and theme toggle for Flows/Fusion apps using Aura Topbar components.

5|1|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/cognitedata/builder-skills --skill use-topbar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: use-topbar
Source: https://github.com/cognitedata/builder-skills/tree/main/skills/use-topbar
Command: npx skills add https://github.com/cognitedata/builder-skills --skill use-topbar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the addition of a consistent, accessible top navigation bar across Flows and Fusion applications, ensuring uniformity and compliance with platform standards.

Core Features & Use Cases

  • Provides a single topbar component integrating breadcrumbs, optional navigation tabs or segmented controls, utility icons, and theme switching.
  • Simplifies app layout by offering a standard header with application branding, object navigation, mode selectors, and user controls.
  • Use Case: Implement a global app header that allows users to navigate between key views, toggle themes, and access sharing or notification features from a unified interface.

Quick Start

Integrate the use-topbar skill into your app to set up the main navigation header with breadcrumbs, mode controls, and theme support.

Frequently Asked Questions about use-topbar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a standard top navigation bar for Fusion apps?

To implement a standard top navigation bar for Fusion apps, integrate this Skill to set up a unified header with breadcrumbs, theme switching, and utility icons. It requires Aura Topbar components and adherence to platform layout standards.

Can I add breadcrumbs and theme switching to my Flows app layout?

Yes, you can add breadcrumbs and theme switching to your Flows app layout. This Skill provides a single topbar component that integrates object navigation, mode selectors, and a theme toggle for a seamless user experience.

What is the best way to ensure consistent app branding across multiple application views?

The best way to ensure consistent app branding across multiple views is using a standardized top navigation bar. This Skill offers a global app header with branding, segmented controls, and user controls to maintain uniformity and compliance.

Does the topbar component support utility icons and mode selectors?

Yes, the topbar component supports utility icons and mode selectors. It is designed to facilitate application branding, object navigation, and user controls, allowing users to access sharing or notification features from a unified interface.

Do I need Aura Topbar components to use this navigation skill?

Yes, you need Aura Topbar components to use this navigation skill. Implementing the standardized top navigation bar requires these components and strict adherence to platform layout standards to ensure accessibility and compliance.