Floating Navigation
<sl-floating-navigation> | SlFloatingNavigation
The floating navigation component.
<sl-floating-navigation current-page="1" total-pages="10"> <sl-icon-button slot="actions-left" name="fal-arrows-left-right"></sl-icon-button> <sl-icon-button slot="actions-left" name="fal-grid-2"></sl-icon-button> <sl-icon-button slot="actions-right" name="fal-eye-slash"></sl-icon-button> <sl-icon-button slot="actions-right" name="fal-sliders-up"></sl-icon-button> </sl-floating-navigation>
Examples
Single direction
Left
<sl-floating-navigation single-direction="left"> </sl-floating-navigation>
Right
<sl-floating-navigation single-direction="right"> </sl-floating-navigation>
Dark mode
<sl-floating-navigation dark current-page="1" total-pages="10"> <sl-icon-button slot="actions-left" name="fal-arrows-left-right"></sl-icon-button> <sl-icon-button slot="actions-left" name="fal-grid-2"></sl-icon-button> <sl-icon-button slot="actions-right" name="fal-eye-slash"></sl-icon-button> <sl-icon-button slot="actions-right" name="fal-sliders-up"></sl-icon-button> </sl-floating-navigation>
Left
<sl-floating-navigation dark single-direction="left"> </sl-floating-navigation>
Right
<sl-floating-navigation dark single-direction="right"> </sl-floating-navigation>
[component-metadata:sl-floating-navigation]
Slots
| Name | Description |
|---|---|
actions-left
|
The left actions slot. |
actions-right
|
The right actions slot. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
dark
|
Whether the floating navigation is in dark mode |
boolean
|
false
|
|
singleDirection
single-direction
|
Whether the floating navigation is in single direction mode |
'left' | 'right' | null
|
null
|
|
currentPage
current-page
|
The current page of the floating navigation |
number
|
1
|
|
totalPages
total-pages
|
The total pages of the floating navigation |
number
|
1
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-change |
|
Emitted when the current page changes. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<sl-divider><sl-icon><sl-icon-button>