Twikit

Get Started Components Avatar Badge Button Carousel Checkbox Color Picker Item Context Menu Context Menu Item Icon Image Picker Item Input Input Unscoped Modal Nav Nav Group Nav Item Picker Progress Radio Radio Group Range Select Sortable Sortable Item Spinner Step Steps Tab Tab Group Textarea Toggle Tooltip CSS Framework Design Tokens Theming

Nav Group

The mandatory element to group navigation items in.

<tw-nav-group>
  <tw-nav-item icon="home" active>Admin</tw-nav-item>
  <tw-nav-item icon="box">Create</tw-nav-item>
  <tw-nav-item icon="bag">Twikfit</tw-nav-item>
  <tw-nav-item icon="chart">Analytics</tw-nav-item>
</tw-nav-group>

CSS Properties

Property Description Default
--tw-nav-group-margin-inline-start The inline start padding of a navigation group. Useful for legacy theming. var(--tw-space-l)
--tw-nav-group-margin-inline-end The inline end padding of a navigation group. Useful for legacy theming. 0
--tw-nav-item-sub-font-size The font size of a sub navigation item. Useful for legacy theming. var(--tw-font-size-m)
--tw-nav-item-sub-gap The gap of a sub navigation item. Useful for legacy theming. var(--tw-font-size-m)