Navbar Tabs

<navbar-tabs> renders one tab per child route of a given router path — there is no tab list to pass in, only a data object per route. The active tab tracks the current URL, and whatever doesn't fit collapses into a "⋮" menu instead of clipping.

Minimal example

import { Routes } from "@angular/router";

export const routes: Routes = [
  {
    path: "search",
    children: [
      { path: "all", data: { display: "All", wsQueryTab: "all", icon: "far fa-globe" } },
      { path: "documents", data: { display: "Documents", wsQueryTab: "documents", icon: "far fa-file-alt", queryName: "documents-query" } },
      { path: "people", data: { display: "People", wsQueryTab: "people", icon: "far fa-user" } },
    ],
  },
];

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

@Component({
  selector: "sample-component",
  imports: [NavbarTabsComponent],
  // Tabs come from the "search" route's children above — nothing else to pass.
  template: `<navbar-tabs path="search" [showCount]="true" />`,
})
export class SampleComponent {}

Renders nothing when path has no matching child routes in the router config.

How it works

Selection is a two-way model (selectedTab) kept in sync with currentPath() one-way only — an effect pushes currentPath() into selectedTab, never the reverse — so a click (which updates selectedTab before the URL actually changes) is not immediately overwritten by that same effect.

Where the counts and the persisted-filters behavior come from

A tab shows no badge at all (not a 0 badge) unless its queryName matches the current result's query name; it is disabled only once the matched count is exactly 0 — in the visible bar and in the overflow menu alike.

Options

No outputs — tab activation navigates through the Angular Router directly.

Pitfalls

What's next