Skip to main content

Text Truncate

The textTruncate functionality is a feature within a menu item and submenu 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​

/horizontal-menu/menu/text-truncate

Source Code​

// Third-party Imports
import classnames from 'classnames'

// Component Imports
import HorizontalNav, { Menu, MenuItem, SubMenu } from '@menu/horizontal-menu'

// Style Imports
import styles from '../styles.module.css'

const TextTruncate = () => {
  return (
    <div className={classnames('flex items-center plb-2.5 pli-6 w-full', styles.customStyles)}>
      <HorizontalNav>
        <Menu>
          <SubMenu label='Dashboards Dashboards Dashboards'>
            <MenuItem>Analytics</MenuItem>
            <MenuItem>eCommerce</MenuItem>
          </SubMenu>
          <MenuItem>Calendar Calendar Calendar</MenuItem>
          <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>
        </Menu>
      </HorizontalNav>
    </div>
  )
}

export default TextTruncate