Usage

Default

Pass an array of navigation items to the navItems prop. Each item should be a CLNavItem object with at minimum an id and label property.

<script setup lang="ts">
import CLNavSection from '@codeandfunction/callaloo/CLNavSection';

const navItems = [
  {
    href: '#',
    id: 'home',
    label: 'Home'
  },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' }
]
</script>

<template>
  <CLNavSection :nav-items="navItems" />
</template>

Colors

Use the color prop to customize the component's color. This color will be applied to all navigation links.

Orientation

Use the type prop to set the orientation of the navigation section. The default orientation is horizontal.

<script setup lang="ts">
import CLNavSection from '@codeandfunction/callaloo/CLNavSection';
import { CLOrientation } from '@codeandfunction/callaloo';

const navItems = [
  {
    href: '#',
    id: 'home',
    label: 'Home'
  },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' }
]
</script>

<template>
  <CLNavSection :nav-items="navItems" :type="CLOrientation.Horizontal" />
  <CLNavSection :nav-items="navItems" :type="CLOrientation.Vertical" />
</template>

External Links

Navigation items can be configured as external links by setting the external property to true and providing a target.

<script setup lang="ts">
import CLNavSection from '@codeandfunction/callaloo/CLNavSection';
import { CLLinkTarget } from '@codeandfunction/callaloo';

const navItems = [
  { id: 'home', label: 'Home', href: '#' },
  {
    id: 'github',
    label: 'Github',
    href: 'https://github.com',
    target: CLLinkTarget.Blank,
    external: true
  }
]
</script>

<template>
  <CLNavSection :nav-items="navItems" />
</template>

With Click Handlers

Navigation items can include click handlers for handling navigation events.

<script setup lang="ts">
import CLNavSection from '@codeandfunction/callaloo/CLNavSection';

const handleNavClick = (page: string) => {
  console.log(`${page} clicked`)
}

const navItems = [
  { id: 'home', label: 'Home', onClick: () => handleNavClick('Home') },
  { id: 'about', label: 'About', onClick: () => handleNavClick('About') },
  { id: 'contact', label: 'Contact', onClick: () => handleNavClick('Contact') }
]
</script>

<template>
  <CLNavSection :nav-items="navItems" />
</template>

Props