ppreeper/webtemplate
1
0
Fork 0
Code Issues 33 Projects Releases Packages Wiki Activity

25: NavBar — top bar with AppMenu, SectionMenu, Breadcrumbs, Systray #26

New issue
Open
opened 2026-07-05 00:45:24 -06:00 by ppreeper · 0 comments
ppreeper commented 2026-07-05 00:45:24 -06:00
Owner
Copy link

Description

Build the top navigation bar — Odoo's NavBar component.

Components

AppMenu

Dropdown button (grid icon) that shows apps list. Active app highlighted. On mobile:
fullscreen sidebar overlay (hamburger menu).

SectionMenu

Horizontal tabs for current app's sections. Overflow items go into a "More"
dropdown when viewport is narrow. Hotkeys 1-0 for first 10 sections.

Breadcrumbs

Navigation trail showing current location: App > Section > Action.
Rendered inside NavBar via portal from ControlPanel.

Systray

Right-aligned icon bar in the navbar. Hosts notification bell, settings,
user avatar dropdown, and other system action icons.

Spec

<header class="o_navbar">
  <nav class="o_main_navbar flex items-center h-12 px-2 bg-gray-900 text-white">
    <AppMenu apps={apps} currentApp={currentApp} />
    <span class="o_menu_brand">{currentApp.name}</span>
    <div class="breadcrumbs"><Breadcrumbs items={breadcrumbs} /></div>
    <SectionMenu sections={sections} />
    <div class="o_menu_systray ml-auto flex items-center gap-1">
      {systrayItems}
    </div>
  </nav>
</header>

References

PRD-003 §2
Odoo: navbar.xml (NavBar, NavBar.AppsMenu, NavBar.SectionsMenu, NavBar.AppsMenu.Sidebar)
muk_web_theme: navbar.xml (enhanced AppMenu with icons)

## Description Build the top navigation bar — Odoo's `NavBar` component. ## Components ### AppMenu Dropdown button (grid icon) that shows apps list. Active app highlighted. On mobile: fullscreen sidebar overlay (hamburger menu). ### SectionMenu Horizontal tabs for current app's sections. Overflow items go into a "More" dropdown when viewport is narrow. Hotkeys 1-0 for first 10 sections. ### Breadcrumbs Navigation trail showing current location: App > Section > Action. Rendered inside NavBar via portal from ControlPanel. ### Systray Right-aligned icon bar in the navbar. Hosts notification bell, settings, user avatar dropdown, and other system action icons. ## Spec ```html <header class="o_navbar"> <nav class="o_main_navbar flex items-center h-12 px-2 bg-gray-900 text-white"> <AppMenu apps={apps} currentApp={currentApp} /> <span class="o_menu_brand">{currentApp.name}</span> <div class="breadcrumbs"><Breadcrumbs items={breadcrumbs} /></div> <SectionMenu sections={sections} /> <div class="o_menu_systray ml-auto flex items-center gap-1"> {systrayItems} </div> </nav> </header> ``` ## References PRD-003 §2 Odoo: navbar.xml (NavBar, NavBar.AppsMenu, NavBar.SectionsMenu, NavBar.AppsMenu.Sidebar) muk_web_theme: navbar.xml (enhanced AppMenu with icons)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ppreeper/webtemplate#26
No description provided.