CategoryNav
Premium navigation pattern for e-commerce, supporting bidirectional synchronization (Left click -> Right scroll; Right scroll -> Left centering & highlighting).
Basic Usage (Massive Data Demo)
This example demonstrates bidirectional linkage with 10 large category groups. The sidebar intelligently centers the active item as you scroll through the massive content area.
Loading State
Displays high-quality skeleton grids when `loading` is enabled.
Custom Theme
The theme-overrides property allows you to quickly override internal CSS variables without writing complex global styles.
Use in Nuxt
YhCategoryNav can be used directly in Nuxt 3/4 projects. After enabling the YH-UI Nuxt module, the component is auto-imported and its static navigation structure can be rendered during SSR.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@yh-ui/nuxt'],
yhUI: {
components: ['YhCategoryNav']
}
})API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
categories | Core data source containing IDs and sub-items | CategoryItem[] | [] |
model-value / v-model | Current active primary category ID | string | number | null | null |
sub-value / v-model:subValue | Current active sub-category ID | string | number | null | null |
side-width | Width of the left sidebar | string | 84px |
show-all | Whether to display the "All" item at the top | boolean | true |
loading | Whether to show refined skeleton loading state | boolean | false |
columns | Number of columns for flattened sub-items | number | 3 |
sub-image-size | Image thumbnail size (px) | number | 64 |
anchor | Whether to enable bidirectional scroll anchoring | boolean | true |
theme-overrides | Set of custom theme CSS variable overrides | Record<string, string> | {} |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
category-click | Triggered when any primary category is clicked | (item: CategoryItem) |
sub-category-click | Triggered when any sub-category is clicked | (item: CategorySubItem, parent: CategoryItem) |
update:modelValue | Emitted when active primary category ID changes | (id: string | number | null) |
update:subValue | Emitted when active sub-category ID changes | (id: string | number | null) |
Slots
| Slot Name | Description | Parameters |
|---|---|---|
all-icon | Custom icon for "All" button | - |
header | Business slot at the top of content area | - |
footer | Business slot at the bottom of content area | - |
section-header | Custom rendering for each section header | { category: CategoryItem } |
section-footer | Custom rendering for each section footer | { category: CategoryItem } |
sub-item | Complete custom rendering for sub-items | { sub: CategorySubItem, parent: CategoryItem } |
Expose
This component does not expose public instance methods or properties.
Theme Variables
| Variable Name | Description | Default |
|---|---|---|
--yh-category-nav-side-bg | Left sidebar background color | #f7f8fa |
--yh-category-nav-content-bg | Right content area background color | #ffffff |
--yh-category-nav-side-active-color | Active item text & indicator color | var(--yh-color-primary) |
--yh-category-nav-side-active-bg | Active item background color | #ffffff |
--yh-category-nav-side-width | Sidebar width | 84px |
--yh-category-nav-sub-image-size | Sub-category image size | 64px |
--yh-category-nav-columns | Number of columns for flattened items | 3 |
--yh-category-nav-section-title-color | Section title color | var(--yh-text-color-secondary) |
Type Exports
| Name | Description |
|---|---|
YhCategoryNavProps | Props type for YhCategoryNav |
YhCategoryNavEmits | Emits type for YhCategoryNav |
YhCategoryNavSlots | Slots type for YhCategoryNav |
YhCategoryItem | Primary category item type |
YhCategorySubItem | Secondary category item type |
YhCategoryNavInstance | Public instance type for YhCategoryNav |