Navbar Tabs

The NavbarTabs component provides a responsive navigation tab system that automatically handles overflow by moving extra tabs to a dropdown menu in your Angular applications.

Usage

sample.component.ts

import { NavbarTabsComponent } from "@angular/atomic-angular";

@Component({
    selector: "sample-component",
    imports: [NavbarTabsComponent],
    template: `
    <navbar-tabs />
    `,
}) export class SampleComponent {
    // The component automatically reads routes from router configuration
    // and displays them as tabs
}

Properties

Property	Type	Description
visibleTabCount	signal<number | undefined>	Tracks the number of tabs visible before overflow occurs.
currentPath	signal<string | undefined>	The currently active tab path.
tabs	computed<NavbarTab[]>	List of all available tabs derived from the router configuration.
moreTabs	computed<NavbarTab[]>	List of tabs that don't fit in the visible area and are shown in the overflow menu.

Methods

Method	Description
changeTab(tab: NavbarTab)	Handles tab change events, closes any open drawers, and updates the navigation.

Features

• Automatically generates tabs from router configuration
• Handles responsive overflow with dropdown menu for extra tabs
• Supports tab icons
• Preserves search text when switching tabs
• Integrates with router for navigation

Visual Schema

UI Layout

┌─────────────────────────────────────────────────────────────────────────┐
│                             NavbarTabsComponent                         │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌───────────────────┐ ┌───────────────┐ ┌───────────────┐ ┌─────────┐  │
│  │     Tab 1         │ │    Tab 2      │ │    Tab 3      │ │    ⋮    │  │
│  │  (Visible Tab)    │ │ (Visible Tab) │ │ (Visible Tab) │ │(Overflow│  │
│  └───────────────────┘ └───────────────┘ └───────────────┘ │  Menu)  │  │
│                                                            └─────────┘  │
│                                                                ▼        │
│                                                          ┌───────────┐  │
│                                                          │  Tab 4    │  │
│                                                          │  Tab 5    │  │
│                                                          │  Tab 6    │  │
│                                                          └───────────┘  │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Component Flow Diagram

Component Architecture

Responsive Behavior Visualization

Component Flow

1. Router Configuration: Reads tab information from the Angular router configuration
2. Tab Generation: Creates tabs from router routes with paths and display names
3. Overflow Detection: Uses overflowManager directive to detect available space
4. Visible Tab Count: Updates visibleTabCount signal when layout changes
5. Overflow Menu: Places tabs that don't fit (using moreTabs() computed property) into a dropdown menu
6. Navigation: When a tab is clicked, it uses router navigation and maintains query parameters