### File

`packages/ecl/components/ecl-inpage-navigation/ecl-inpage-navigation.component.ts`

### Description

The in-page navigation is a vertical menu containing (anchored) links to H2-headings on long content pages. It gives the user an overview of the page contents and has a fixed position (does not move while scrolling) at either the left side of a page on desktop or top-bar on mobile. This component helps users scan of the page quickly contents and may potentially reduce vertical scrolling, allowing users to easily jump straight to the segment of the page.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `AfterViewInit` `OnDestroy` `DoCheck`

### Metadata

selector | `ecl-inpage-navigation`
imports | `TranslateModule` `EUI_ECL_STICKY_CONTAINER` `EUI_ECL_ICON`
styles | `@media (min-width: 996px) { .ecl-inpage-navigation__list { display: block !important; } }`
templateUrl | `./ecl-inpage-navigation.component.html`

### Index

###### Properties
currentSectionElement eclNavigationLinkItems eclNavigationList eclThemeService isButtonExpanded Public isRtl Public listMaxHeight navTittle togglerButton toggleWrapper
###### Methods
onExpandButtonClick onExpandButtonKeydown getCssClasses
###### Inputs
eclTitle marginBottom marginTop offsetTop class e2eAttr tabindex
###### Outputs
sectionEnter
###### Accessors
hasNavigationList currentNavigationLinkItem sizeIcon hasActiveSection

### Constructor

`constructor()`

### Inputs

eclTitle
Type : `string`

marginBottom
Type : `number`

marginTop
Type : `number`
Used to calculate component's position.

offsetTop
Type : `number`
Sets the offset from the top of the page (for example if there is a toolbar or header). Used to calculate scrolling behaviour.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

sectionEnter
Type : `EventEmitter`
This event will be emitted, when onscroll a new section becomes active.

### Methods

onExpandButtonClick
`onExpandButtonClick()`
On mobile view - handle the dropdown toggle. Returns : `void`

onExpandButtonKeydown
`onExpandButtonKeydown(evt: Event)`
Dropdown keyboard navigation on mobile view. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

currentSectionElement
Type : `HTMLElement | null`
Default value : `null`

eclNavigationLinkItems
Type : `QueryList<EclInpageNavigationItemComponent>`
Decorators : `@ContentChildren(EclInpageNavigationItemComponent, {descendants: true})`

eclNavigationList
Type : `EclInpageNavigationListDirective`
Decorators : `@ContentChild(EclInpageNavigationListDirective)`

eclThemeService
Type : `unknown`
Default value : `inject(EclThemeService)`

isButtonExpanded
Type : `unknown`
Default value : `false`
Used for the mobile view, where user can select a section from the dropdown.

Public isRtl
Type : `unknown`
Default value : `false`

Public listMaxHeight
Type : `number`

navTittle
Type : `ElementRef<HTMLDivElement>`
Decorators : `@ViewChild('navTittle')`

togglerButton
Type : `ElementRef<HTMLButtonElement>`
Decorators : `@ViewChild('togglerButton')`

toggleWrapper
Type : `ElementRef<HTMLDivElement>`
Decorators : `@ViewChild('toggleWrapper')`

### Accessors

hasNavigationList
get `hasNavigationList()`

currentNavigationLinkItem
get `currentNavigationLinkItem()`

sizeIcon
get `sizeIcon()`
the size of the arrow-down icon, used in mobile view. There are different sizes for EC and EU themes. Returns : `string`

hasActiveSection
get `hasActiveSection()`

# results matching ""

# No results matching ""