0.0.11-pre.3 • Public • Published


A web component for navigating to sections of your page that can stick as you scroll.


If you are using a module loader, you can install the web component with NPM like:

npm install @bitovi/sticky-nav

Import the web component:

import "../../node_modules/@bitovi/sticky-nav";


To use, just insert the HTML element tag created by the package.


That's it.

Changing Default Configuration

You can optionally provide attributes to the component to customize your experience. Here are the default attribute values.




  • required: false
  • type: boolean
  • default: "true"

The stick attribute determines whether the sticky-nav-fixed class gets added to the element when you scroll passed it. This class defaults to having a fixed position style property. By default, it will assume the consuming application wants a sticky navbar.

<sticky-nav sticky="false"></sticky-nav>


  • required: false
  • type: string
  • default: "sticky-nav"

The scrollable-container-selector attribute is the tag (HTML element, class, or ID) contains the section headings that you want to scroll to. By default, it will be the window.

<sticky-nav scrollable-container-selector=".header"></sticky-nav>


  • required: false
  • type: string
  • default: "h2"

The heading-selector attribute is the tag (HTML element, class, or ID) that will be used to create the navbar items. By default, it will scour the <body> for H2 tags.

<sticky-nav heading-selector="h3"><sticky-nav>

Custom Styles

You can override or modify the default styles by using the provided IDs and classes. The component is structured like the following:

        <ul class="sticky-nav-inner">
            <ul class="sticky-nav-item">
                <a>Heading Example 1</a>
            <ul class="sticky-nav-item">
                <a>Heading Example 2</a>

Navbar Wrapper

To customize the styles of the navbar container, use the following tag in your styles:

    sticky-nav {}

If you have not disabled the sticky attribute; a sticky-nav-fixed class will be added to the <sticky-nav> element as the user scrolls passed the menu. By default, the sticky-nav-fixed class adds a position: fixed; to the styles of the <sticky-nav> element.

If you want to customize this behavior, access the sticky-nav-fixed class on the <sticky-nav> element:

    sticky-nav.sticky-nav-fixed {}

Navbar Inner Container

To customize the styles of the navbar inner container (which is scrolled by the outer container), use the following ID in your styles:

    sticky-nav>ul {}

Navbar Items

To customize the styles of the navbar's items, use the following class in your styles:

    sticky-nav>ul>li {}

If you want to customize the active state of a nav item, use the following class in your styles:

    sticky-nav>ul>li.sticky-nav-active {}

The sticky-nav-active class is added whenever the section represented by the nav item is in or below the top 1/3 of the page and above of the next section in the page. The sticky-nav-active class will only be applied to one item at a time.


Using TypeScript + TSX

You may get the following linting error on the web component: Property 'sticky-nav' does not exist on type 'JSX.IntrinsicElements'. To fix this, add the following snippet to your declarations.d.ts file.

// In ~/declarations.d.ts

declare namespace JSX {
    // ...
  interface IntrinsicElements {
      // ...
    "sticky-nav": any;

Package Sidebar


npm i @bitovi/sticky-nav

Weekly Downloads






Unpacked Size

21.2 kB

Total Files


Last publish


  • bmomberger-bitovi
  • janebitovi
  • kyle-n
  • bitovi-os
  • bitovi-core-os
  • mickmcgrath13
  • phillipskevin
  • tehfedaykin
  • rlmcneary2
  • mhaynie_bitovi
  • fabioemoutinho
  • christopherjbaker
  • justinbmeyer
  • cherif_b
  • alishouman