Navigation Generator

Navigation Configuration

Brand/Logo Text

Navigation Style

Theme

Mobile Hamburger Menu

Include Search Box

Navigation Items

Generated Code

Live Preview

Navigation Generator

Create responsive navigation menus with dropdowns, mobile support, and modern styling. Perfect for building website headers and navigation systems.

Features

Responsive Design: Mobile-first approach with hamburger menu for small screens
Multiple Styles: Horizontal, vertical, fixed, and sticky navigation options
Theme Support: Light, dark, primary, and gradient color schemes
Dropdown Menus: Multi-level dropdown support with hover and click interactions
Search Integration: Optional search box with customizable styling
Accessibility: ARIA labels and keyboard navigation support

Discover Toolexe, a comprehensive collection of free web tools designed for both regular users and developers. Everything is quick, free, and available for use, including time calculators, smart unit converters, HTML formatters, and useful JSON tools. No restrictions or signup the tools you require, when you need them.

Tools Categories

`;navPreview.innerHTML = html;applyNavStyles(css);applyNavFunctionality();} function getNavConfig() {const config = {brand: document.getElementById('nav-brand').value,style: document.getElementById('nav-style').value,theme: document.getElementById('nav-theme').value,mobileMenu: document.getElementById('mobile-menu').checked,searchBox: document.getElementById('search-box').checked,items: []};document.querySelectorAll('.nav-item-config').forEach(itemDiv => {const item = {text: itemDiv.querySelector('.nav-item-text').value,link: itemDiv.querySelector('.nav-item-link').value,hasDropdown: itemDiv.querySelector('.nav-item-dropdown').checked,active: itemDiv.querySelector('.nav-item-active').checked,disabled: itemDiv.querySelector('.nav-item-disabled').checked,dropdownItems: []};if (item.hasDropdown) {const dropdownText = itemDiv.querySelector('.nav-dropdown-items').value;if (dropdownText) {item.dropdownItems = dropdownText.split('\n').filter(line => line.trim()).map(line => {const [text, url] = line.split(',');return { text: text.trim(), url: (url || '#').trim() };});}} config.items.push(item);});return config;} function generateNavCode(config) {const navClass = getNavClass(config);let html = `

\n`;html += '

\n';if (config.brand) {html += ` ${config.brand}\n`;} if (config.mobileMenu) {html += ` \n`;} html += ' \n';html += '

\n';html += '

\n';const css = generateNavCSS(config);const js = generateNavJS(config);return { html, css, js };} function getNavClass(config) {let classes = ['custom-nav'];classes.push(`nav-${config.style}`);classes.push(`nav-${config.theme}`);return classes.join(' ');} function getItemClass(item) {let classes = ['nav-item'];if (item.hasDropdown) classes.push('dropdown');if (item.active) classes.push('active');if (item.disabled) classes.push('disabled');return classes.join(' ');} function generateNavCSS(config) {const themeColors = {light: { bg: '#f8f9fa', text: '#333', hover: '#e9ecef' },dark: { bg: '#343a40', text: '#fff', hover: '#495057' },primary: { bg: '#007bff', text: '#fff', hover: '#0056b3' },gradient: { bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', text: '#fff', hover: 'rgba(255,255,255,0.1)' }};const colors = themeColors[config.theme];return `.custom-nav {background: ${colors.bg};color: ${colors.text};padding: 0;box-shadow: 0 2px 4px rgba(0,0,0,0.1);font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;} .nav-container {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;position: relative;} .nav-brand {font-size: 24px;font-weight: bold;text-decoration: none;color: ${colors.text};padding: 15px 0;} .nav-menu {display: flex;align-items: center;gap: 20px;} .nav-list {display: flex;list-style: none;margin: 0;padding: 0;gap: 5px;} .nav-item {position: relative;} .nav-link {display: block;padding: 15px 20px;text-decoration: none;color: ${colors.text};transition: all 0.3s ease;border-radius: 4px;} .nav-link:hover {background: ${colors.hover};color: ${colors.text};} .nav-item.active .nav-link {background: ${colors.hover};font-weight: 600;} .nav-item.disabled .nav-link {opacity: 0.5;cursor: not-allowed;} .dropdown-menu {position: absolute;top: 100%;left: 0;background: #fff;min-width: 200px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);border-radius: 4px;list-style: none;margin: 0;padding: 10px 0;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;z-index: 1000;} .dropdown:hover .dropdown-menu {opacity: 1;visibility: visible;transform: translateY(0);} .dropdown-link {display: block;padding: 10px 20px;color: #333;text-decoration: none;transition: background 0.2s ease;} .dropdown-link:hover {background: #f8f9fa;} .nav-search {display: flex;align-items: center;gap: 5px;} .search-input {padding: 8px 12px;border: 1px solid rgba(255,255,255,0.3);border-radius: 20px;background: rgba(255,255,255,0.1);color: ${colors.text};outline: none;width: 200px;} .search-input::placeholder {color: rgba(255,255,255,0.7);} .search-btn {background: none;border: none;color: ${colors.text};cursor: pointer;font-size: 16px;} .nav-toggle {display: none;flex-direction: column;background: none;border: none;cursor: pointer;padding: 5px;} .nav-toggle span {width: 25px;height: 3px;background: ${colors.text};margin: 3px 0;transition: 0.3s;border-radius: 2px;} .nav-fixed-top {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;} .nav-sticky {position: sticky;top: 0;z-index: 1000;} .nav-vertical {width: 250px;height: 100vh;position: fixed;left: 0;top: 0;} .nav-vertical .nav-container {flex-direction: column;align-items: stretch;height: 100%;padding: 20px;} .nav-vertical .nav-list {flex-direction: column;width: 100%;} .nav-vertical .nav-item {width: 100%;} .nav-vertical .nav-link {width: 100%;padding: 15px 20px;} @media (max-width: 768px) {.nav-toggle {display: flex;} .nav-menu {position: absolute;top: 100%;left: 0;right: 0;background: ${colors.bg};flex-direction: column;align-items: stretch;padding: 20px;transform: translateY(-10px);opacity: 0;visibility: hidden;transition: all 0.3s ease;} .nav-menu.active {transform: translateY(0);opacity: 1;visibility: visible;} .nav-list {flex-direction: column;width: 100%;} .nav-item {width: 100%;} .nav-link {width: 100%;padding: 15px 0;border-bottom: 1px solid rgba(255,255,255,0.1);} .dropdown-menu {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;background: rgba(255,255,255,0.1);margin-left: 20px;} .nav-search {width: 100%;margin-top: 15px;} .search-input {flex: 1;}}`;} function generateNavJS(config) {return `// Mobile menu toggle document.getElementById('nav-toggle')?.addEventListener('click', function() {const navMenu = document.getElementById('nav-menu');navMenu.classList.toggle('active');this.classList.toggle('active');});document.addEventListener('click', function(e) {const navToggle = document.getElementById('nav-toggle');const navMenu = document.getElementById('nav-menu');if (navToggle && navMenu && !navToggle.contains(e.target) && !navMenu.contains(e.target)) {navMenu.classList.remove('active');navToggle.classList.remove('active');}});document.querySelectorAll('a[data-url]').forEach(link => {link.addEventListener('click', function(e) {e.preventDefault();const url = this.getAttribute('data-url');if (url && url !== '#' && url !== '') {if (url.startsWith('http') || url.startsWith('/') || url.startsWith('./')) {window.location.href = url;} else {console.log('Navigation to:', url);}}});});document.querySelectorAll('a[href^="#"]').forEach(anchor => {anchor.addEventListener('click', function (e) {e.preventDefault();const target = document.querySelector(this.getAttribute('href'));if (target) {target.scrollIntoView({behavior: 'smooth'});}});});`;} function applyNavStyles(css) {let existingStyle = document.getElementById('nav-styles');if (existingStyle) {existingStyle.remove();} const style = document.createElement('style');style.id = 'nav-styles';style.textContent = css;document.head.appendChild(style);} function applyNavFunctionality() {setTimeout(() => {const navToggle = document.getElementById('nav-toggle');const navMenu = document.getElementById('nav-menu');if (navToggle && navMenu) {navToggle.addEventListener('click', function() {navMenu.classList.toggle('active');});} document.querySelectorAll('a[data-url]').forEach(link => {link.addEventListener('click', function(e) {e.preventDefault();const url = this.getAttribute('data-url');if (url && url !== '#' && url !== '') {if (url.startsWith('http') || url.startsWith('/') || url.startsWith('./')) {window.location.href = url;} else {console.log('Navigation to:', url);}}});});}, 100);} function copyCode() {generatedCode.select();document.execCommand('copy');const originalText = copyBtn.textContent;copyBtn.textContent = 'Copied!';copyBtn.classList.add('btn-success');copyBtn.classList.remove('btn-outline-success');setTimeout(() => {copyBtn.textContent = originalText;copyBtn.classList.remove('btn-success');copyBtn.classList.add('btn-outline-success');}, 2000);} addNavItem();addNavItem();addNavItem();generateNavigation();});