feat(core): app menu waffle launcher by pringelmann · Pull Request #60180 · nextcloud/server

pringelmann · 2026-05-06T08:11:51Z

Resolves: App navigation: waffle menu and header layout #59948

Summary

First pass at the waffle launcher behind the apps icon in the header. Opening it shows a 4-wide grid of installed apps in a popover; admins also see a "More apps" tile linking to the app store. The existing current-app button is kept as a second trigger for the same popover.

Preview link

What's in:

Popover grid replaces the old hamburger overlay
Roving tabindex keyboard nav (arrow keys, Home/End, Enter/Space)
Focus returns to whichever trigger opened the popover
RTL-aware horizontal alignment
Admin-only "More apps" tile
Unit + Cypress coverage

TODO

Follow-ups for later PRs:

Live unread/notification counts on the tiles
Drag-and-drop reordering, persisted per user
Broaden test coverage (RTL, focus trap edge cases, keyboard variants, viewport breakpoints)

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes (preview link)
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)
Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
Milestone added for target branch/version (ex: 32.x for stable32)

pringelmann · 2026-05-06T08:23:04Z

+</script>
+
+<style scoped lang="scss">
+.app-item {


We can consider moving this to @nextcloud/vue in future, since this item will be used on dashboard, universal search, etc.
Would like to ship in-place for first iteration.

if planned for nextcloud-vue it would be great to use css modules instead of scoped styles for two-way isolation of styles.

pringelmann · 2026-05-06T08:24:37Z

+ // NcPopover's focus-trap only knows the slot trigger (waffle).
+ // The current-app button lives outside the slot, so we track the
+ // source and restore focus manually via setReturnFocus.
+ openedFrom: null as 'waffle' | 'currentApp' | null,


UX behaviour relevant question here. Used common sense for first iteration.

pringelmann · 2026-05-06T08:26:24Z

+ return
+ }
+
+ const cols = 4


magic number 😬 imo fine for first iteration, but some rework might be needed here.

pringelmann · 2026-05-06T08:27:07Z

+ case ' ': {
+ // Space's default scrolls the nearest scrollable ancestor (the
+ // popover); intercept and click programmatically. Enter gets
+ // the same treatment so we can close the popover uniformly.


Consistent with other waffle menus I looked at, but worth flagging as UX question

space seems a bit unexpected here rest seems fine (for accessibility)

fwiw APG recommends this behaviour:
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/#:~:text=activates%20the%20menu%20item%2C
My reasoning is that arrows, Home and End all trigger focus events (which will auto-scroll), making it possible for users to scroll the list without needing a dedicated key for it.

pringelmann · 2026-05-06T08:27:50Z

+ // which is dark on light themes. The header sits on the theme primary
+ // background, so override to use the matching plain-text color.
+ --color-main-text: var(--color-background-plain-text);
+ color: var(--color-background-plain-text);


Might be better to add variants to @nextcloud/vue, but imo fine for first iteration

pringelmann · 2026-05-06T08:29:42Z

+ --app-item-row-height: 64px;
+ --app-menu-rows-visible: 6;
+ padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2);
+ display: grid;


We can debate whether grid is best/simplest solution here. Happy to iterate on this.

pringelmann · 2026-05-06T08:30:57Z

+	scrollbar-color: var(--color-scrollbar) transparent !important;
+
+	&::-webkit-scrollbar {
+ width: 6px !important;


Quick and dirty scrollbar styling. Happy to iterate on this.

susnux · 2026-05-06T10:31:08Z

+ v-if="currentApp"
+ class="app-menu__current-app"
+ type="button"
+ :aria-label="t('core', 'Open apps menu')"


so both buttons open the waffle menu?
I would expect this button to open the index of the current app instead

Yes as per design spec
This also feels like a weird interaction to me, especially since the popup anchor still points to the waffle. Would you mind expanding on what the rationale is here @kra-mo?

agree UX wise this is unexpected

This also feels like a weird interaction to me, especially since the popup anchor still points to the waffle. Would you mind expanding on what the rationale is here @kra-mo?
Since most apps that need it already provide a navigation item to go "Home", it was to make the menu more easy to access and discover.
I thought of both behaviors and this just felt "safer", even if more unconventional. Maybe I'm just being overly cautious though.
Were we to keep this, it would be good to link the two as a single button (when focused or hovered for example).

Ok yeah that makes sense. I think a single button would definitely help yes. Perhaps we go with what we have for the first step and gather some internal feedback?

artonge · 2026-05-07T10:43:11Z

Approved to be merged for the screenshots, we will address all the raised concerns in a follow-up.

schiessle · 2026-05-07T10:45:48Z

Because truncated app names are a concern raised from users every now and than with the "old menu". Does this menu adjust the column width automatically so that the app name is always completely readable (also think about translation where app names might be longer)?

Will be done in a follow-up

- Popover grid replaces the old hamburger overlay - Roving tabindex keyboard nav (arrow keys, Home/End, Enter/Space) - Focus returns to whichever trigger opened the popover - RTL-aware horizontal alignment - Admin-only "More apps" tile - Unit + Cypress coverage Resolves: #59888 Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

…cher Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

artonge · 2026-05-07T19:50:24Z

CI failure unrelated

pringelmann self-assigned this May 6, 2026

pringelmann commented May 6, 2026
View reviewed changes

Comment threadcore/src/components/AppItem.vue Outdated

pringelmann commented May 6, 2026
View reviewed changes

pringelmann added 3. to review Waiting for reviews enhancement design Design, UI, UX, etc. labels May 6, 2026

pringelmann added this to the Nextcloud 34 milestone May 6, 2026

pringelmann added this to 🖍 Design team May 6, 2026

pringelmann marked this pull request as ready for review May 6, 2026 08:33

pringelmann requested a review from a team as a code owner May 6, 2026 08:34

pringelmann requested review from ShGKme, artonge, kra-mo, nfebe, sorbaugh and susnux and removed request for a teamMay 6, 2026 08:34

susnux reviewed May 6, 2026
View reviewed changes

Comment threadcore/src/components/AppItem.vue Outdated

susnux reviewed May 6, 2026
View reviewed changes

pringelmann force-pushed the feat/59888/waffle-menu branch from f177035 to c115c2fCompare May 7, 2026 09:49

artonge approved these changes May 7, 2026
View reviewed changes

backportbotBot added the backport-request label May 7, 2026

nextcloud deleted a comment from backportbotBotMay 7, 2026

artonge mentioned this pull request May 7, 2026
34.0.0 beta 4 #60216
Merged

pringelmann force-pushed the feat/59888/waffle-menu branch from 459eb89 to 2319472Compare May 7, 2026 12:53

jancborchardt approved these changes May 7, 2026
View reviewed changes

jancborchardt moved this to 🏗️ At engineering in 🖍 Design team May 7, 2026

pringelmann added 11 commits May 7, 2026 19:25

fix: stylelint issue
78e98bb
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: remove new tab links
7ec7eb8
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

feat: add app store link for non-admins
8e5d02b
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

feat: only app store link opens in new tab
f895e77
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

refactor(AppItem): drop redundant boolean prop defaults
041dd9f
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: minor styling issues
55f9a87
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

chore: rebuild assets
16190be
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix: unit test
fa20120
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

chore: rebuild assets
831989b
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

fix(cypress): adapt NavigationHeader and theming specs to waffle laun…
c36d64d
…cher Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

pringelmann force-pushed the feat/59888/waffle-menu branch from d2c9166 to c36d64dCompare May 7, 2026 17:25

artonge merged commit f501b44 into masterMay 7, 2026
312 of 352 checks passed

artonge deleted the feat/59888/waffle-menu branch May 7, 2026 19:50

github-project-automationBot moved this from 🏗️ At engineering to 🎉 Done in 🖍 Design team May 7, 2026

AndyScherzinger removed the backport-request label May 7, 2026

nextcloud-bot mentioned this pull request May 12, 2026
34.0.0 beta 5 #60334
Merged

pringelmann mentioned this pull request May 13, 2026
feat(core): app menu polish for NC34 #60358
Merged
7 tasks

AndyScherzinger mentioned this pull request May 14, 2026
test(context): Update nav bar test for 34+ update nextcloud/tables#2602
Merged

nextcloud-bot mentioned this pull request May 15, 2026
[stable34] 34.0.0 RC1 #60393
Merged

joshtrichards mentioned this pull request May 18, 2026
[Bug]: new app menu for Nextcloud 34: don't show "app store"-button for normal users #60495
Open
8 tasks

nextcloud-bot mentioned this pull request May 20, 2026
[stable34] 34.0.0 RC2 #60598
Merged

nextcloud-bot mentioned this pull request May 27, 2026
[stable34] 34.0.0 RC3 #60771
Merged

Uh oh!

Uh oh!

Conversation

pringelmann commented May 6, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

TODO

Checklist

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

artonge commented May 7, 2026

Uh oh!

schiessle commented May 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

artonge commented May 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

pringelmann commented May 6, 2026•
edited
Loading

schiessle commented May 7, 2026•
edited
Loading