Command Palette Navbar Template

A sophisticated, power-user-focused navbar inspired by developer tools and modern productivity apps.

This implementation creates a minimal navbar with a search button that opens a "Command Palette" modal. This palette is fully keyboard-navigable, filterable, and built with a strong focus on accessibility.

Screenshot of the magnetic links navbar template

Get Source Code → Preview →

The Command Palette Navbar

A sophisticated, power-user-focused navbar inspired by developer tools and modern productivity apps. Instead of traditional links, it features a minimal button that opens a centered "Command Palette." Users can instantly search and filter all available pages and actions, and navigate entirely with their keyboard, creating an extremely fast and efficient user experience.

Fast, Filterable Search — As the user types in the input, the list of actions and pages below filters in real-time, instantly showing the most relevant results. The search is case-insensitive.
Full Keyboard Control (âŒ˜+K / Ctrl+K) — The command palette can be opened with a universal keyboard shortcut. Once open, users can navigate results with Arrow Keys, select with Enter, and close with Escape.
Advanced Accessibility — Built with a dialog role, ARIA attributes, and robust focus management. Focus is automatically moved to the search input on open and returned to the trigger button on close. Body scroll is locked when the palette is active.
Dynamic & Maintainable: All navigation items are defined in a single JavaScript array, making it incredibly easy to add, remove, or modify commands without changing the HTML structure.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Command Palette Navbar</title>
    <style>
        :root {
            --color-background: #f9fafb;
            --color-text: #1f2937;
            --color-text-muted: #6b7280;
            --color-primary: #3b82f6;
            --color-border: #e5e7eb;
            --color-surface: #ffffff;
            --color-overlay-bg: rgba(23, 23, 25, 0.6);

--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --navbar-height: 70px;
            --palette-width: 640px;
            --border-radius: 12px;
        }

*, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans); background-color: var(--color-background); color: var(--color-text); }
        .content {
        min-height: 150vh;
        padding: 1.5rem;
        max-width: 1024px;
        margin: 0 auto;
        }
        body.cmd-palette-open { overflow: hidden; }
        .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
        
        /* Navbar Styles */
        .navbar { height: var(--navbar-height); display: flex; align-items: center; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); }
        .navbar__container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }
        .navbar__brand { font-size: 1.5rem; font-weight: 600; }
        .cmd-palette-trigger {
            display: flex; align-items: center; gap: .75rem;
            padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: 8px;
            background-color: var(--color-background); cursor: pointer; color: var(--color-text-muted);
        }
        .kbd-shortcut {
            background-color: #fff; padding: .125rem .375rem; border-radius: 4px;
            border: 1px solid var(--color-border); border-bottom-width: 2px;
            font-size: 0.75rem; color: var(--color-text-primary);
        }

/* Command Palette Overlay and Modal */
        .cmd-palette {
            position: fixed; inset: 0; z-index: 2000;
            display: flex; justify-content: center; align-items: flex-start;
            background-color: var(--color-overlay-bg);
            padding-top: 15vh;
            
            /* Hide/Show logic */
            opacity: 0; visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
        }
        .cmd-palette.is-open { opacity: 1; visibility: visible; }
        
        .cmd-palette__modal {
            width: 100%; max-width: var(--palette-width);
            background-color: var(--color-surface); border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.2s;
            transform: scale(0.95);
        }
        .cmd-palette.is-open .cmd-palette__modal { transform: scale(1); }
        
        .cmd-palette__header { display: flex; align-items: center; gap: 1rem; padding: .75rem; border-bottom: 1px solid var(--color-border); }
        .cmd-palette__input { flex-grow: 1; border: none; background: transparent; font-size: 1.1rem; width: 100%; }
        .cmd-palette__input:focus { outline: none; }
        
        .cmd-palette__results { max-height: 40vh; overflow-y: auto; padding: .5rem; }
        .cmd-palette__item { display: block; width: 100%; text-align: left; padding: .75rem; border-radius: 6px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--color-text); }
        .cmd-palette__item:hover, .cmd-palette__item.is-highlighted {
            background-color: var(--color-primary);
            color: #fff;
        }
        .cmd-palette__item[aria-disabled="true"] { color: var(--color-text-muted); background-color: var(--color-surface); pointer-events: none; }
    </style>
</head>
<body>

<header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">PowerApp</a>
            <button class="cmd-palette-trigger" id="cmd-palette-trigger" aria-haspopup="dialog" aria-controls="cmd-palette">
                Search or jump to...
                <kbd class="kbd-shortcut" aria-hidden="true">
                    <span class="cmd-key">âŒ˜</span>K
                </kbd>
            </button>
        </div>
    </header>
    
    <div class="cmd-palette" id="cmd-palette" role="dialog" aria-modal="true" aria-labelledby="cmd-palette-label" tabindex="-1">
        <div class="cmd-palette__modal">
            <h2 id="cmd-palette-label" class="visually-hidden">Command Palette</h2>
            <div class="cmd-palette__header">
                <svg width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg>
                <input class="cmd-palette__input" id="cmd-palette-input" type="text" placeholder="Type a command or search..." role="combobox" aria-expanded="true" aria-controls="cmd-palette-results">
            </div>
            <ul class="cmd-palette__results" id="cmd-palette-results" role="listbox">
                
            </ul>
        </div>
    </div>
    
    <main class="content">
        <h1>Command Palette Navbar</h1>
        <p>Click the search button or press <code>âŒ˜K</code> (or <code>Ctrl+K</code> on Windows) to open the palette.</p>
    </main>

// --- 2. Element References ---
        const triggerButton = document.getElementById('cmd-palette-trigger');
        const palette = document.getElementById('cmd-palette');
        const input = document.getElementById('cmd-palette-input');
        const resultsList = document.getElementById('cmd-palette-results');
        const cmdKeySpan = document.querySelector('.cmd-key');
        let highlightedIndex = -1;

// --- 3. Core Functions ---
        function openPalette() {
            // Adapt shortcut hint for non-Mac users
            if (!navigator.platform.includes('Mac')) { cmdKeySpan.textContent = 'Ctrl'; }
            renderResults(commandItems);
            palette.classList.add('is-open');
            document.body.classList.add('cmd-palette-open');
            input.focus();
        }

function closePalette() {
            palette.classList.remove('is-open');
            document.body.classList.remove('cmd-palette-open');
            input.value = ''; // Clear input on close
            triggerButton.focus(); // Restore focus
        }

input.addEventListener('input', () => {
            const query = input.value.toLowerCase();
            const filteredItems = commandItems.filter(item => item.name.toLowerCase().includes(query));
            renderResults(filteredItems);

});
    });
    </script>
</body>
</html>

View Output