Navsearch Layout

NavsearchLayout component

Properties

Property	Description	Type	Default
links	Navsearch navigation items	NavsearchItem[]	[]
theme	Navsearch variant	NavsearchTheme	default
scrollBehavior	Navsearch behavior when scrolling	NavsearchScrollBehavior	fixed
size	Max content width	'default' | 'large' | 'wide' | 'full'	'default'

Slots

• default
• logo
• toolbar
• toolbar-mobile
• navbar-title
• navbar-content
• subnav-start
• subnav-links
• subnav-links-mobile
• subnav-end
• page-heading
• extra

Context

The NavsearchLayout component expose a context object that can be used to control the navsearch programmatically. It use provide/inject under the hood.

In order to access this, you either need to use useNavsearchLayoutContext composable, or via slot properties.

You can access layout context via slot properties:

src/layouts/my-layout.vue

<template>
  <NavsearchLayout>
    <slot />

    <template #subnav-links-mobile="{ isMobileSidebarOpen }">
      <VButton @click="isMobileSidebarOpen = false">
        Close sidebar
      </VButton>
    </template>
  </NavsearchLayout>
</template>

Or via useNavsearchLayoutContext composable (the component should be a child of NavsearchLayout):

src/components/MySubnavMobile.vue

<script setup lang="ts">
import { useNavsearchLayoutContext } from '/@src/components/layouts/navbar/navbar.context'

const { isMobileSidebarOpen } = useNavsearchLayoutContext()
</script>

<template>
  <VButton @click="isMobileSidebarOpen = false">
    Close sidebar
  </VButton>
</template>

src/layouts/my-layout.vue

<template>
  <NavsearchLayout>
    <slot />

    <template #subnav-links-mobile>
      <MySubnavMobile />
    </template>
  </NavsearchLayout>

Types

NavsearchTheme

type NavsearchTheme =
  | 'default'
  | 'fade'

NavsearchScrollBehavior

type NavsearchScrollBehavior =
  | 'reveal'
  | 'shrink'
  | 'fixed'

NavsearchItem

interface NavsearchItem {
  to: string
  label: string
}

NavsearchLayoutContext

interface NavsearchLayoutContext {
  theme: ComputedRef<NavsearchTheme>
  scrollBehavior: ComputedRef<NavsearchScrollBehavior>
  links: ComputedRef<NavsearchItem[]>

  isMobileSidebarOpen: Ref<boolean>
}