MenuItem

One entry of a menu: the page’s name and what it covers, as one link.

import { MenuItem } from '@zitdevs/ui';

Examples

Custom softwarePlatforms, internal systems and productsWeb developmentFast, scalable sites that convert

<MenuItem
  href="/services/custom-software-development"
  title="Custom software"
  description="Platforms, internal systems and products"
  current
/>

Through a router’s link, such as Next’s Link, with asChild: the child brings the element and its routing props, the item its classes, content and aria-current. See Router links.

IT auditWhat you run, what it costs, what is at risk

import Link from 'next/link';

<MenuItem asChild title="IT audit" description="What you run, what it costs, what is at risk">
  <Link href="/services/it-audit" />
</MenuItem>;

Props

Prop	Type	Default	Notes
title	string	required	The page’s name, read first.
description	string	required	What it covers, read after the title.
current	boolean	false	The entry for the page being read: tinted, and aria-current="page".
href	string	—	Required without asChild; not allowed with it.
asChild	boolean	false	Renders its one child element (a router’s link) as the item.
children	ReactElement	—	With asChild, the element to render as. Its children are replaced.
ref	Ref<HTMLAnchorElement>	—	The link.
className	string	—	Placement.
anything else	<a> attributes	—	Except title, which is the visible title here.

Exported type: MenuItemProps.

Accessibility

• One <a>, whose name is the title followed by the description, since both sit inside it.
• current sets aria-current="page", so assistive technology says which entry is the page being read; the tint only repeats it.
• The link draws the kit’s focus ring itself. For light fields only.

Use instead: an outlined link on either field → LinkCard; the menu’s promotion → PromoCard.

Without JavaScript

It needs none: a link, rendered as a Server Component, through a router’s link too.

Theming

ink (title), muted (description), primary-soft (hover and current), the focus ring.