scrollingOf Property

Determines the scrollable container of corresponding sections where the <ListItem>s of <Navscroll> should be highlighted.

The structure of <ListItem>s should be match to the structure of the <scrollable_container>'s children (<section>s or <div>s or any <element>s).

Here the preview:

scrollingSelector Property

Filters the desired <section>s or <whatever_element>s you wish to be the corresponding sections by providing a valid CSS selector expression.

The default is scrollingSelector='*', so any elements will be treated as the corresponding sections.

You can also set something like <Navscroll scrollingSelector='section, div, .section'> or whatever selector you want, depending on the project you're working on.

scrollingFilter Property

Filters the desired <section>s or <whatever_element>s you wish to be the corresponding sections by providing a JavaScript callback function.

The callback function will receive a HTMLElement object and then should return a boolean value indicating the selection was passed (true) or not (false).

scrollingInterpolation Property

Determines how the highlighting transition between corresponding sections is performed.

The possible values are:

• undefined
• false
• true

Here the preview:

listStyle Property

Sets the alternative appearances of the <Navscroll>.

The possible values are:

• undefined
• 'regular'
• 'flat'
• 'flush'
• 'joined'
• 'content'
• 'button'
• 'tab'
• 'breadcrumb'
• 'bullet'
• 'numbered'

Here the preview:

orientation Property

Sets the orientation of the <Navscroll>.

The possible values are:

• undefined
• 'inline'
• 'block'

Here the preview:

size Property

Defines the alternative size of the <Navscroll>.

You can set the size individually for each <ListItem>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

Here the preview:

theme Property

Defines the contextual theme of the <Navscroll>.

You can set the theme individually for each <ListItem>.

The possible values are:

• undefined
• 'primary'
• 'secondary'
• 'success'
• 'info'
• 'warning'
• 'danger'
• 'light'
• 'dark'

Here the preview:

gradient Property

Activates a 3D mode of the <Navscroll>.

You can set the gradient individually for each <ListItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Navscroll>.

You can set the outlined individually for each <ListItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Navscroll>.

You can set the mild individually for each <ListItem>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

enabled Property

Defines the enabled/disabled state of the <Navscroll>.

You can set the enabled individually for each <ListItem>.

The possible values are:

• undefined
• true
• false

Here the preview:

inheritEnabled Property

Influences the <Navscroll>'s disabled state by <ancestor enabled={false}>.

You can set the inheritEnabled individually for each <ListItem>.

The possible values are:

• undefined
• true
• false

Here the preview:

navComponent Property

Overwrites the internal <Nav> component used as the composition of <Navscroll> component.

<Navscroll navComponent={
    <MyCustomNav />
} />

navscrollComponent Property

Overwrites the internal <Navscroll> component used as the detection of nested <Navscroll>.

export const MyCustomNavscroll = (props: NavscrollProps) => {
    
    /* ... */
    
    return (
        <Navscroll {...props} navscrollComponent={
            <MyCustomNavscroll />
        } />
    );
}