Skip to main content

Text Truncate

The textTruncate functionality is a feature within a menu item, submenu, or menu section that allows for the truncation of text that exceeds the available space. The textTruncate prop is used to truncate the text. By default the text is truncated with an ellipsis. textTruncate prop provides the flexibility to disable the truncation by setting it to false.

Props​

textTruncat?: boolean
Default Value
textTruncate={true}

Example​

/vertical-menu/menu/text-truncate

Source Code​

'use client'

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

const TextTruncate = () => {
  return (
    <VerticalNav customBreakpoint='200px'>
      <Menu>
        <MenuSection label='Dashboards & Apps Dashboards & Apps'>
          <SubMenu label='Dashboards Dashboards Dashboards '>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem>Calendar Calendar Calendar</MenuItem>
        </MenuSection>
        <MenuSection label='Others'>
          <MenuItem>FAQ</MenuItem>
          <SubMenu label='Menu Level'>
            <MenuItem>Menu Level 2.1</MenuItem>
            <SubMenu label='Menu Level 2.2'>
              <MenuItem>Menu Level 3.1</MenuItem>
              <MenuItem>Menu Level 3.2</MenuItem>
            </SubMenu>
          </SubMenu>
          <MenuItem>Documentation</MenuItem>
        </MenuSection>
      </Menu>
    </VerticalNav>
  )
}

export default TextTruncate