Navigational Tabs
Navigational Tabs group related pages or sections within the same product. Selecting a tab loads a new page or URL route, while keeping users within the overall navigation experience.
Import
Default Navigational Tabs
Compact NavigationalTabs
Props
Navigational Tabs Props
| Name | Description | Default |
|---|---|---|
| className | Additional class names to apply to the component string | - |
| variant | Variant of the navigational tabs "default" | "compact" | default |
| children | Children elements to render inside the navigational tabs ReactNode | - |
| previousLinkButtonProps | Props to be spread onto the previous item button Omit<IconButtonProps, "onClick" | "variant" | "screenReaderLabel" | "shape"> | - |
| nextLinkButtonProps | Props to be spread onto the next item button Omit<IconButtonProps, "onClick" | "variant" | "screenReaderLabel" | "shape"> | - |
| aria-label | ARIA label for nav; this is mandatory if the page contains more than one string | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. TabsLabelOverrides | - |
Navigational Tab Props
| Name | Description | Default |
|---|---|---|
| className | Additional class names to apply to the component string | - |
| href* | Path to navigate to when the tab is clicked string | - |
| aria-current | Whether the tab is currently active (i.e., represents the current page) boolean | "page" | - |
| id* | id string | - |
| onClick | onClick handler ((e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | - |
| children | Children elements to render inside the navigational tab ReactNode | - |
| asChild | Component will delegate outermost React element to use first element passed within children boolean | - |
| reactlytics | ReactlyticsProp | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.