Menu

Preview

A working preview of Menu in the Brickclay style. Try it.

Interactive playground

• Dashboard
• Projects
• Settings

orientation

submenuMode

trigger

Markup

Copy<bk-menu
  [items]="items"
  [(activeItemId)]="active"
  orientation="vertical"
  submenuMode="popup"
  trigger="hover">
</bk-menu>

Event log

Interact with the menu to see emitted events.

Hover or click trigger="hover" | "click"

Hover fly-outs follow the pointer and close as it leaves, with a short grace period so the gap between an item and its panel can be crossed. Click fly-outs stay put until you click the parent again, pick a leaf, or click outside; once one is open, hovering a sibling still switches panels the way a native menubar does. Inline submenus are always click, so this only applies to submenuMode="popup".

Hover (default)

• Navigation One
• Navigation Two
• Navigation Three

Click

Group titles MenuItem.childrenLabel

childrenLabel names the group an item's children form. It heads the group, outdented a notch from the rows below it and separated from them by a rule, the same either way, whether the group is a pop-up panel or an inline block. It is a label, not an item: it can't be hovered, selected or focused.

Pop-up

• Account
• Workspace
• Help

Inline, same title, same rule

• Account YOUR ACCOUNT Profile Billing Security SIGN-IN & RECOVERY Password Two-factor auth Trusted devices
• Workspace TEAM SETTINGS Members Roles & permissions Audit log

Multi-group sections MenuItem.groupLabel

groupLabel splits one flat children array into several named sections, all visible at once, no further expand step. A rule sits between sections rather than under each heading. Use this for a mega-menu-style panel (e.g. a "Reports" nav item grouping several report links by category); use childrenLabel instead when the whole list is a single group.

• Dashboards
• Reports

Compact size="compact"

The same menu with the type, padding, icons and indent step stepped down, for sidebars and toolbars where the default is too generous. Everything else behaves identically.

Default

• Navigation Two Option 5 Option 6 Option 7 Option 8
• Navigation Three Option 9 Option 10 Submenu Sub-item 1 Sub-item 2

Compact

Compact, horizontal menubar with pop-ups

• Home
• Products
• Company
• Docs

Staying on screen

A fly-out opens to the right by default, and to the left when the right has no room for it, and the other way round, so a branch that flipped left keeps going left instead of doubling back over its own parent. This menu is pinned to the right edge: hover it and the panels come out leftwards. Narrow the window to watch the ones above flip too.

Vertical, inline submenus (orientation="vertical", submenuMode="inline")

With icons

Without icons (note the disabled item)

• Products Overview Pricing Releases
• Company About Careers Contact

[submenuBackground]="true", opt-in tint, inline only

Single-open (accordion) [singleOpen]="true"

Opening one menu collapses the others so the whole menu stays compact, only one submenu is expanded at a time. Try opening "Navigation Two", then "Navigation Three".

Single-open with a getter-sourced [items]

Fixed bug, kept here as a regression demo. [items] below is bound to a getter that returns a brand-new array of brand-new object literals on every read, a common Angular pattern, and this page forces extra change-detection passes every 300ms so that getter keeps re-running while you look at it (tick: 5). bk-menu used to treat every such reference change as a reason to re-collapse every singleOpen branch, so opening "Navigation Two" here would immediately re-close itself. Try it, it now stays open.

Active item auto-expands its ancestors

Setting activeItemId to a nested leaf expands every submenu on its path, on the very first change, not only when the user clicks to open a branch. This is what makes a sidebar built on bk-menu land with the right section already open after a deep link or a page refresh, with no extra code in the page using it (inline mode only, pop-up fly-outs stay driven by hover/click). This menu starts with activeItemId = 'sub1', two levels deep, reload this page and "Navigation Three > Submenu" is already open below.

Vertical, pop-up submenus (submenuMode="popup")

Hover a parent, its submenu flies out to the side (the chevron points the way it went) and adapts as you go deeper. Selecting a leaf keeps its parent highlighted.

Without icons

Many items, vertical scroll [maxHeight]="'300px'"

With maxHeight set, the menu scrolls vertically once it has too many items. In pop-up mode the fly-outs are positioned fixed, so they render outside the scrolling nav instead of being clipped.

Inline, scrolls at 300px

• Section 1 SECTION 1 Section 1 · Item A Section 1 · Item B Section 1 · Item C
• Section 2 SECTION 2 Section 2 · Item A Section 2 · Item B Section 2 · Item C
• Section 3 SECTION 3 Section 3 · Item A Section 3 · Item B Section 3 · Item C
• Section 4 SECTION 4 Section 4 · Item A Section 4 · Item B Section 4 · Item C
• Section 5 SECTION 5 Section 5 · Item A Section 5 · Item B Section 5 · Item C
• Section 6 SECTION 6 Section 6 · Item A Section 6 · Item B Section 6 · Item C
• Section 7 SECTION 7 Section 7 · Item A Section 7 · Item B Section 7 · Item C
• Section 8 SECTION 8 Section 8 · Item A Section 8 · Item B Section 8 · Item C
• Section 9 SECTION 9 Section 9 · Item A Section 9 · Item B Section 9 · Item C
• Section 10 SECTION 10 Section 10 · Item A Section 10 · Item B Section 10 · Item C
• Section 11 SECTION 11 Section 11 · Item A Section 11 · Item B Section 11 · Item C
• Section 12 SECTION 12 Section 12 · Item A Section 12 · Item B Section 12 · Item C

Pop-up, scrolls at 300px (fly-outs escape)

• Section 1
• Section 2
• Section 3
• Section 4
• Section 5
• Section 6
• Section 7
• Section 8
• Section 9
• Section 10
• Section 11
• Section 12

Horizontal, menubar (orientation="horizontal", submenuMode="popup")

Hover to open. Top-level submenus drop down, or up, if the bottom of the window is closer than the panel is tall. Deeper levels fly out to the side.

Basic usage

Copy// component.ts
items: MenuItem[] = [
  { id: 'home', label: 'Home', icon: 'assets/home.svg' },
  {
    id: 'products', label: 'Products',
    childrenLabel: 'Our products',   // titles the child group
    children: [
      { id: 'p1', label: 'Overview' },
      { id: 'p2', label: 'Pricing' },
    ],
  },
];
active = 'home';

// template
<bk-menu
  [items]="items"
  [(activeItemId)]="active"
  orientation="vertical"
  submenuMode="popup"
  trigger="hover"
  size="default"
  (itemClick)="onSelect($event)">
</bk-menu>