CategoryNavigation

Demos

Top level

Fullscreen
import { CategoryNavigation, CategoryNavigationItem } from 'marketing-ui'

function Demo() {
  return (
    <CategoryNavigation>
      <CategoryNavigationItem variant='default'>
        All products
      </CategoryNavigationItem>
      <CategoryNavigationItem variant='text' href='#'>
        Shampoo
      </CategoryNavigationItem>
      <CategoryNavigationItem variant='text' href='#'>
        Wax &amp; Sealants
      </CategoryNavigationItem>
      <CategoryNavigationItem variant='text' href='#'>
        Polishing
      </CategoryNavigationItem>
    </CategoryNavigation>
  )
}

export default Demo

Nested with stack

Fullscreen
import {
  CategoryNavigation,
  CategoryNavigationItem,
  CategoryNavigationItemStack,
} from 'marketing-ui'

function Demo() {
  return (
    <CategoryNavigation>
      <CategoryNavigationItemStack level={1}>
        <CategoryNavigationItem level={1} selected>
          Exterior
        </CategoryNavigationItem>
      </CategoryNavigationItemStack>
      <CategoryNavigationItem variant='text' selected>
        All
      </CategoryNavigationItem>
      <CategoryNavigationItem variant='text' href='#'>
        Shampoo
      </CategoryNavigationItem>
      <CategoryNavigationItem variant='text' href='#'>
        Wax &amp; Sealants
      </CategoryNavigationItem>
    </CategoryNavigation>
  )
}

export default Demo

Props