ExactMatch & Active Url

These two props are introduced to make a menu item active based on the current dynamic URL.

ExactMatch

The exactMatch prop is a boolean that determines whether a menu item should be active only if the menu item's href exactly matches the current pathname.

The default value of exactMatch is true.

If the exactMatch prop is set to false, you must pass the activeUrl prop in the menu item. A menu item will be active if the current pathname contains the activeUrl. This allows you to make a specific menu item active for multiple routes.

ActiveUrl

The activeUrl prop is a string that specifies a part of the URL. When exactUrl is set to false, the menu item will be active if the current pathname contains the activeUrl. This allows you to make a specific menu item active for multiple routes.

Props

// Exact match for active URL in menu item
export type MenuItemExactMatchUrlProps =
  | {
      exactMatch: true
      activeUrl?: never
  }
  | {
      exactMatch: false
      activeUrl: string
  }
  | {
      exactMatch?: never
      activeUrl?: never
}

Example

'use client'

// Component Imports
import VerticalNav, { Menu, MenuItem } from '@menu/vertical-menu'

const ExactMatch = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu menuItemStyles={{ button: { paddingBlock: '12px' } }}>
         <MenuItem
          href={'/.../apps/ecommerce/orders/details/5434'}
          exactMatch={false}
          activeUrl='/apps/ecommerce/orders/details'
        >
          Details
        </MenuItem>
        <MenuItem href={'/.../apps/email'} exactMatch={false} activeUrl='/apps/email'>
          email
        </MenuItem>
      </Menu>
    </VerticalNav>
  )
}

export default ExactMatch

Let's break down the above code snippet for email menu item:

This menu item will be active if the current pathname contains /apps/email. However, if the pathname includes additional segments such as /apps/email/inbox, /apps/email/sent, or /apps/email/drafts, you can make this menu item active for all routes that contain /apps/email by setting the exactMatch prop to false and the activeUrl prop to /apps/email.