@sveltestrap/sveltestrap/src/Nav/Nav.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as NavStories from './Nav.stories';

<Meta title="Components/Nav" />

# Nav <small class="bootstrap-docs">[Bootstrap Nav](https://getbootstrap.com/docs/5.3/components/navs-tabs/)</small>

The `<Nav>` component is a responsive navigation component that can be customized to appear as tabs, links, pills, and more.

<Canvas>
  <Story of={NavStories.Basic} />
</Canvas>

<Controls of={NavStories.Basic} />

## Tabs

<Canvas withSource="none">
  <Story of={NavStories.Tabs} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import {
    Nav,
    NavItem,
    Dropdown,
    DropdownItem,
    DropdownToggle,
    DropdownMenu,
    NavLink
  } from '@sveltestrap/sveltestrap';

  let isOpen = false;
</script>

<Nav tabs>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <Dropdown nav {isOpen} toggle={() => (isOpen = !isOpen)}>
    <DropdownToggle nav caret>Dropdown</DropdownToggle>
    <DropdownMenu>
      <DropdownItem header>Header</DropdownItem>
      <DropdownItem disabled>Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>
`} />

## Pills

<Canvas withSource="none">
  <Story of={NavStories.Pills} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import {
    Nav,
    NavItem,
    Dropdown,
    DropdownItem,
    DropdownToggle,
    DropdownMenu,
    NavLink
  } from '@sveltestrap/sveltestrap';

  let isOpen = false;
</script>

<Nav pills>
  <NavItem>
    <NavLink href="#" active>Link</NavLink>
  </NavItem>
  <Dropdown nav {isOpen} toggle={() => (isOpen = !isOpen)}>
    <DropdownToggle nav caret>Dropdown</DropdownToggle>
    <DropdownMenu>
      <DropdownItem header>Header</DropdownItem>
      <DropdownItem disabled>Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>
`} />

## Underline

<Canvas withSource="none">
  <Story of={NavStories.Underline} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import {
    Nav,
    NavItem,
    Dropdown,
    DropdownItem,
    DropdownToggle,
    DropdownMenu,
    NavLink
  } from '@sveltestrap/sveltestrap';

  let isOpen = false;
</script>

<Nav underline>
  <NavItem>
    <NavLink href="#" active>Link</NavLink>
  </NavItem>
  <Dropdown nav {isOpen} toggle={() => (isOpen = !isOpen)}>
    <DropdownToggle nav caret>Dropdown</DropdownToggle>
    <DropdownMenu>
      <DropdownItem header>Header</DropdownItem>
      <DropdownItem disabled>Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>
`} />

## Vertical

<Canvas withSource="none">
  <Story of={NavStories.Vertical} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import {
    Nav,
    NavItem,
    NavLink
  } from '@sveltestrap/sveltestrap';
</script>

<p>List Based</p>

<Nav vertical>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>

<hr />

<p>Link based</p>

<Nav vertical>
  <NavLink href="#">Link</NavLink>
  <NavLink href="#">Link</NavLink>
  <NavLink href="#">Another Link</NavLink>
  <NavLink disabled href="#">Disabled Link</NavLink>
</Nav>
`} />

## Theming

<Canvas withSource="none">
  <Story of={NavStories.Theming} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import {
    Nav,
    NavItem,
    NavLink
  } from '@sveltestrap/sveltestrap';
</script>

<Nav theme="dark">
  <NavItem active>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>

<Nav theme="light">
  <NavItem active>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink href="#">Another Link</NavLink>
  </NavItem>
  <NavItem>
    <NavLink disabled href="#">Disabled Link</NavLink>
  </NavItem>
</Nav>
`} />