# Defaults: MobileMenu to PromoBar (/themes/sdk/reference/chrome/defaults-3)

```ts
import { … } from '@poltura/theme-sdk/chrome';
```

## `MobileMenu` [#mobilemenu]

The mobile menu drawer: open while [`useMobileMenu`](/themes/sdk/reference/chrome/hooks#usemobilemenu) says so, closed when a link in it is followed or the page changes.

```ts
MobileMenu(props: MobileMenuProps): ReactElement
```

**Props:** [`MobileMenuProps`](/themes/sdk/reference/chrome/types#mobilemenuprops)

<Tab value='Example'>

```tsx
import { MobileMenu } from '@poltura/theme-sdk/chrome';

export function HeaderDrawer() {
  return <MobileMenu title="Menu" side="right" />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/mobile-menu.tsx"
import { useEffect, useRef, type MouseEvent, type ReactElement } from 'react';
import { useMobileMenu, type MobileMenuProps } from '@poltura/theme-sdk/chrome';
import { MobileNav } from '@poltura/theme-sdk/navigation';
import { usePathname } from '@poltura/theme-sdk/routing';
import { Sheet, SheetContent, SheetHeader, SheetTitle, cn } from '@poltura/theme-sdk/ui';

export function MobileMenu({
  title,
  side = 'left',
  header,
  children,
  className,
}: MobileMenuProps): ReactElement {
  const menu = useMobileMenu();
  const { setOpen } = menu;
  const pathname = usePathname();
  const shownAt = useRef(pathname);

  useEffect(() => {
    if (shownAt.current === pathname) return;
    shownAt.current = pathname;
    setOpen(false);
  }, [setOpen, pathname]);

  const closeOnLink = (event: MouseEvent<HTMLElement>) => {
    if (event.target instanceof Element && event.target.closest('a[href]') !== null) {
      setOpen(false);
    }
  };

  return (
    <Sheet open={menu.open} onOpenChange={setOpen}>
      <SheetContent
        side={side}
        onClickCapture={closeOnLink}
        className={cn('w-80 max-w-[85vw] overflow-y-auto', className)}
      >
        <SheetHeader>
          <SheetTitle className={header === undefined ? undefined : 'sr-only'}>{title}</SheetTitle>
          {header}
        </SheetHeader>
        {children ?? <MobileNav className='px-4' />}
      </SheetContent>
    </Sheet>
  );
}
```

</Tab>


**See also:** [`useMobileMenu`](/themes/sdk/reference/chrome/hooks#usemobilemenu)

## `PromoBar` [#promobar]

The announcement strip above the header, drawn only while it is on and has text.

```ts
PromoBar(props: PromoBarProps): ReactElement | null
```

**Props:** [`PromoBarProps`](/themes/sdk/reference/chrome/types#promobarprops)

<Tab value='Example'>

```tsx
import { PromoBar } from '@poltura/theme-sdk/chrome';

export function Top() {
  return <PromoBar className='text-xs' />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/promo-bar.tsx"
import type { ReactElement } from 'react';
import { usePromoBar, type PromoBarProps } from '@poltura/theme-sdk/chrome';
import { Link } from '@poltura/theme-sdk/routing';
import { cn } from '@poltura/theme-sdk/ui';

export function PromoBar({ className }: PromoBarProps): ReactElement | null {
  const promo = usePromoBar();
  if (!promo.visible) return null;
  return (
    <div
      className={cn('promo-bar border-b border-border bg-muted text-muted-foreground', className)}
    >
      <div className='promo-bar-inner container mx-auto flex items-center justify-center px-4 py-1.5 text-center text-xs sm:text-sm'>
        <Link
          href={promo.href}
          className='promo-bar-link font-medium text-foreground/80 transition-colors hover:text-foreground'
        >
          {promo.text}
        </Link>
      </div>
    </div>
  );
}
```

</Tab>


**See also:** [`usePromoBar`](/themes/sdk/reference/chrome/hooks#usepromobar)