Usage

<script setup lang="ts">
const {
  navBottomLink,
  navDirFromPath,
  navPageFromPath,
  navKeyFromPath
} = useContentHelpers()
</script>

Learn more about the navigation object.

navBottomLink()

Take a navigation node and will resolve the first available path from that node.

It can be useful to build nested navigations systems.

<script setup>
const { navBottomLink } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())

const path = navBottomLink(navigation.value)
</script>

navDirFromPath()

This function will take a path and will resolve the first available navigation node from that path.

It can be useful to find the current directory of a navigation node.

<script setup>
const route = useRoute()
const { navDirFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())

const dir = navDirFromPath(route.path, navigation.value)
</script>

navPageFromPath()

This function will take a path and will resolve the first available navigation page from that path.

It can be useful to find the current navigation node the page you're browsing.

<script setup>
const route = useRoute()
const { navPageFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())

const page = navPageFromPath(route.path, navigation.value)
</script>

navKeyFromPath()

This function will take a path and will resolve a specific key from that path.

It can be useful when you want to add a fallback on the _dir.yml value of a key in a page.

<script setup>
const route = useRoute()
const { navKeyFromPath } = useContentHelpers()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())

const layout = navKeyFromPath(route.path, 'layout', navigation.value)
</script>