Skip to content

Add a top utility bar to the homepage header#5067

Open
dimitrieh wants to merge 1 commit into
mainfrom
dimitrieh/top-utility-bar
Open

Add a top utility bar to the homepage header#5067
dimitrieh wants to merge 1 commit into
mainfrom
dimitrieh/top-utility-bar

Conversation

@dimitrieh
Copy link
Copy Markdown
Contributor

Description

Adds a slim top utility bar above the main navigation on the website header.

  • Left: a rotating announcement that cycles through live events (replacing the old events-banner, whose rotation behaviour now lives in the bar) plus standing promos for FlowFuse Expert and installing the device agent.
  • Right (desktop): quick links: Blog, Docs, Support, Download, Sign In.
  • Mobile: Sign In stays visible in the bar, a Contact Us CTA sits next to the hamburger menu button, and the menu close button stays above the open menu overlay.

Docs and Sign In move into the bar on desktop and remain reachable on mobile. The old events-banner.njk is removed; its rotation behaviour is preserved in the bar.

Related Issue(s)

Issue to be added: the tracking issue for what this is part of still needs to be created and linked.

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass (N/A: static Eleventy template/markup, no test harness)
  • Documentation has been updated (N/A)
  • For blog PRs, an Art Request has been created (N/A: not a blog PR)

Introduce a slim indigo bar above the main navigation:
- Left: a rotating announcement slot cycling through live events (replacing the
  old events-banner, whose rotation behaviour now lives here) plus standing
  promos for FlowFuse Expert and installing the device agent.
- Right (desktop): quick links - Blog, Docs, Support, Download, Sign In.
- Mobile: Sign In stays in the bar, a Contact Us CTA sits next to the hamburger
  menu button, and the menu close button stays above the open menu overlay.

Docs and Sign In move into the bar on desktop and remain reachable on mobile.
@netlify
Copy link
Copy Markdown

netlify Bot commented May 27, 2026

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 277216d
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a16f8ed171fac0008f41c12
😎 Deploy Preview https://deploy-preview-5067--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 85 (🟢 up 1 from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@dimitrieh
Copy link
Copy Markdown
Contributor Author

@Yndira-E I am working out the issues/product initiatives that would support this. For now this is an artifact of experimentation and might be a quick win in between. Please have a look.

What this would do is:

  • Better usage of the banner with additional items.
  • Surface specific items that are otherwise buried in submenus
  • Dedicated sign in button (we'll be able to see this way which people just want to sign in and whom want to create an account) - might want to check if the telemetry is in place here 🤔
  • Product related: We'll start pushing the device agent more for and edge first onboarding flow. Therefore the download button and additional banner hardcoded event item.

Inspiration taken from https://tailscale.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant