# Navigation
- **Package**: `LAYOUT`
- **Type**: components
Taiga UI is a low level component library with many atomic components that provide great flexibility when combined together. An exception to the general rule is the Navigation component – an opinionated global wrapping navigation that exposes less customization options developed specifically to target data-heavy dashboards with minimal space lost and compact controls.
### Usage Examples
#### Full
Full fledged example showcasing every section of the navigation filled with content, links, menus etc.
**Template:**
```html
Reset navigation appearance by tuiDropdownAppearance=""
Set tuiTheme="dark" on the button so it fits the header
Get app theme: readonly dark = inject(TUI_DARK_MODE)
Use it to set theme on the wrapping tag:
[attr.tuiTheme]="dark() ? 'dark' : 'light'"
@for (_ of '-'.repeat(10); track $index) {
Some random content A subtitle
}
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThemeColorService} from '@taiga-ui/addon-mobile';
import {
TUI_DARK_MODE,
TuiButton,
TuiDataList,
TuiDropdown,
TuiLink,
TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiChevron, TuiFade, TuiSwitch, TuiTabs} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader, TuiList, TuiNavigation} from '@taiga-ui/layout';
@Component({
imports: [
FormsModule,
TuiAvatar,
TuiButton,
TuiCardLarge,
TuiChevron,
TuiDataList,
TuiDropdown,
TuiFade,
TuiHeader,
TuiLink,
TuiList,
TuiNavigation,
TuiSwitch,
TuiTabs,
TuiTitle,
],
templateUrl: './index.html',
encapsulation,
changeDetection,
})
export default class Example {
private readonly theme = inject(TuiThemeColorService);
protected readonly dark = inject(TUI_DARK_MODE);
protected color = false;
protected onColor(color: boolean): void {
this.theme.color = color ? 'purple' : 'black';
}
}
```
#### Subheader object
Navigation with expanded page header including description and other page details.
**Template:**
```html
@if (current === 'basic') {
Research and Development Platform
Here you can initiate and participate in the review of package objects. Each object have up to 3 groups of reviewers, with one response required from each type, and any other participant can change both positive.
Personal and Development Plan Here you can initiate and participate in the review of package objects. Each object have up to 3 groups of reviewers, with one response required from each type, and any other participant can change both positive
} @for (_ of '-'.repeat(10); track $index) {
Some random content A subtitle
}
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiGroup, TuiIcon, TuiInput, TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiBadge, TuiBlock, TuiBreadcrumbs, TuiFade, TuiTabs} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
@Component({
imports: [
FormsModule,
TuiBadge,
TuiBlock,
TuiBreadcrumbs,
TuiButton,
TuiCardLarge,
TuiFade,
TuiGroup,
TuiHeader,
TuiIcon,
TuiInput,
TuiLink,
TuiNavigation,
TuiTabs,
TuiTitle,
],
templateUrl: './index.html',
encapsulation,
changeDetection,
})
export default class Example {
protected current = 'basic';
}
```
#### Customization
Changing colors and mode.
**Template:**
```html
@for (_ of '-'.repeat(10); track $index) {
Some random content A subtitle
}
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPortals, TuiPortalService, tuiProvide, TuiVCR} from '@taiga-ui/cdk';
import {TuiButton, TuiPopupService, TuiTitle} from '@taiga-ui/core';
import {TuiChevron, TuiFade} from '@taiga-ui/kit';
import {
TuiCardLarge,
TuiHeader,
tuiLayoutIconsProvider,
TuiNavigation,
} from '@taiga-ui/layout';
@Component({
imports: [
TuiButton,
TuiCardLarge,
TuiChevron,
TuiFade,
TuiHeader,
TuiNavigation,
TuiTitle,
TuiVCR,
],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
providers: [
tuiLayoutIconsProvider({grid: '@tui.align-justify'}),
// Ignore portal related code, it is only here to position drawer inside the example block
TuiPopupService,
tuiProvide(TuiPortalService, TuiPopupService),
],
})
export default class Example extends TuiPortals {
protected open = true;
}
```
**LESS:**
```less
:host {
// Use TuiThemeColorService instead, this is just for demo purposes
--tui-theme-color: #87ceeb;
}
.drawer {
// Unnecessary when TuiThemeColorService is instead
background: rgb(135, 206, 235);
color: var(--tui-text-primary);
}
aside::before {
display: none;
}
main::before {
content: '';
}
header::after {
display: none;
}
```
#### InputSearch
Using dedicated search component in a header for a spotlight global portal search pattern.
**Template:**
```html
Taiga UI {{ item.title }} {{ item.subtitle }} Alex Inkin
