import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { SecondaryNavigation } from './secondary-navigation.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="SecondaryNavigation" component={SecondaryNavigation} />

# Secondary Navigation

`<SecondaryNavigation />` is useful when you'd like to have tab-like functionality that will work across different URLs. This will create a similar feel to a `<PageTitle />` component, with a bit more styling involved and will manage the styling when the pathname matches the `href` provided.

## Stories

### Default

<Canvas>
  <Story id="components-navigation-secondarynavigation--default" />
</Canvas>

### With onClick

<Canvas>
  <Story id="components-navigation-secondarynavigation--on-click" />
</Canvas>

### With Horizontal Scrolling

<Canvas>
  <Story id="components-navigation-secondarynavigation--horizontal-scrolling" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SecondaryNavigation} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/navigation/secondary-navigation"
  type="github"
/>