@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UINavigationPage

    A full-page navigation layout that combines a UIDrawer, a UISidebarNav with configurable items, a UIBreadcrumb path, and a main content area.

    Navigation items are provided as a tree — either via an ITreeDatasource for dynamic data, or via a convenience items input accepting NavigationNode[].

    Tree nodes with children are rendered as collapsible <ui-sidebar-group> elements; leaf nodes render as <ui-sidebar-item> entries. The breadcrumb trail is built automatically from the node hierarchy.

    Input Type Use case
    datasource ITreeDatasource<NavigationNodeData> Dynamic / async data
    items NavigationNode[] Static in-memory tree

    When both are set, datasource takes precedence.

    Use the navItem() and navGroup() factory functions (or routesToNavigation() for Angular Router integration) to build the node array ergonomically.

    <ui-navigation-page
      [items]="navItems"
      [(activePage)]="currentPage"
      (navigated)="onNavigate($event)"
    >
      <ng-template #content let-node>
        <h2>{{ node.data.label }}</h2>
      </ng-template>
    </ui-navigation-page>

    Implements

    • OnInit
    Index

    Constructors

    constructor

    Properties

    activePage ariaLabel breadcrumbItems breadcrumbVariant contentTemplate currentPage datasource drawerOpen drawerPosition drawerWidth items navigated projectedItems resolvedDatasource rootLabel rootNodes showSidebarToggle sidebarPinned sidebarVisible storageKey

    Methods

    navigate navigateToRoot ngOnInit toggleSidebar

    Constructors

    Properties

    activePage: ModelSignal<string> = ...

    The currently active node id. Supports two-way binding.

    ariaLabel: InputSignal<string> = ...

    Accessible label for the navigation landmark.

    breadcrumbItems: Signal<readonly BreadcrumbItem[]> = ...

    Breadcrumb trail derived from the active node and its ancestors.

    breadcrumbVariant: InputSignal<BreadcrumbVariant> = ...

    Visual style for the breadcrumb trail.

    contentTemplate: Signal<TemplateRef<NavigationPageContext> | undefined> = ...

    Projected template for the main content area. Receives the current NavigationNode as the implicit context.

    <ng-template #content let-node>
      <h2>{{ node.data.label }}</h2>
    </ng-template>
    currentPage: Signal<NavigationNode | undefined> = ...

    The currently active navigation node.

    datasource: InputSignal<ITreeDatasource<NavigationNodeData> | undefined> = ...

    Tree datasource providing navigation nodes.

    Accepts any ITreeDatasource whose data payload is NavigationNodeData. Root nodes with children render as collapsible groups; leaf nodes render as sidebar items.

    Takes precedence over the items convenience input.

    drawerOpen: ModelSignal<boolean> = ...

    Whether the drawer is open (when not pinned). Supports two-way binding.

    drawerPosition: InputSignal<DrawerPosition> = ...

    Side the drawer slides in from.

    drawerWidth: InputSignal<string> = ...

    Width of the drawer panel.

    items: InputSignal<readonly NavigationNode[]> = ...

    Convenience: static array of navigation tree nodes.

    When set (and no datasource is provided), an internal ArrayTreeDatasource is created automatically.

    Build nodes with the navItem() / navGroup() factories or the routesToNavigation() utility.

    navigated: OutputEmitterRef<NavigationNode> = ...

    Emitted when the user navigates to a node.

    projectedItems: Signal<readonly UISidebarItem[]> = ...

    Projected sidebar items for custom content above the generated items.

    resolvedDatasource: Signal<ITreeDatasource<NavigationNodeData>> = ...

    Resolved datasource — from the input or auto-created from items.

    rootLabel: InputSignal<string> = ...

    Root breadcrumb label displayed as the first item in the trail. Clicking it navigates to the first leaf node.

    rootNodes: Signal<readonly NavigationNode[]> = ...

    Root nodes from the resolved datasource.

    showSidebarToggle: InputSignal<boolean> = ...

    Whether to show the sidebar toggle button before the breadcrumb.

    sidebarPinned: InputSignal<boolean> = ...

    Whether the drawer should always be visible (desktop layout).

    sidebarVisible: ModelSignal<boolean> = ...

    Whether the sidebar panel is visible. Supports two-way binding. Defaults to shown.

    storageKey: InputSignal<string> = ...

    Optional localStorage key for persisting the sidebar open/closed state.

    When set, the component reads the stored value on creation and writes back whenever sidebarVisible changes. Leave empty (the default) to disable persistence.

    Methods

    • Navigate to a node by its tree-node reference.

      Parameters

      Returns void

    • Navigate to the first leaf node (root breadcrumb click handler).

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • Toggle the sidebar and persist the new state to storage.

      Returns void

    Settings

    Member Visibility

    On This Page

    Data sources
    Constructors
    Properties
    Methods