Back to Top
The nuts and bolts for
Creative web development

DMXzone Bootstrap 3 Navigation

“Great Bootstrap 3 Navigation for your website or app”

Make your Bootstrap 3 website or app complete with the DMXzone Bootstrap 3 Navigation extension for Dreamweaver. Empower fully responsive navigation for optimal user experience. The extension offers extensive visual management and rendering of your navigations, directly in Dreamweaver Design View. Next to the full management of the navigation you can also specify the visibility of each navigation item, depending on the device that's been viewed on. Included is also automatic active item selection based on scroll position and current page.

You need to have DMXzone Bootstrap 3 installed in Dreamweaver to use Navigations! 

Features

General Features

  • Extensive visual management of all your Bootstrap 3 Navigations - Add navs, navbars and dropdowns and manage their items.
 
 
  • Great visual rendering and management - All available directly in Dreamweaver Design View.


  • Fully responsive and customizable navigation - Make your navigation fully responsive for any mobile device or desktop browser. Customize it to fit and suit your website or app design from the many provided options.


  • Automatic "active" item selection - Based on the URL the navigation highlights the corresponding nav item. You can also do that onscroll for different sections of your website or app.
  • Full compatibility with DMXzone Font Awesome - Add any of the 369 icons included in DMXzone Font Awesome to enhance your navigation. 


  • Fully responsive floating panel inspector -  The floating panel can be docked on any side of your Dreamweaver and is fully responsive.

Navbar

Navbar is a component that serves as navigation header for your application or website. It is fully responsive and customizable for your needs.

  • Style the navbar - Choose the position of your navbar on your page.
 


    • Fixed top - The top fixed navbar will always remain on top of your page and will overlay the content onscroll.
    • Fixed bottom - The bottom fixed navbar will always remain on the bottom of your page and will overlay the content onscroll
    • Static top - The top static navbar remains on top until you scroll down your page and it scrolls away with it.

  • Align the navbar - You can position your navbar either on the left or on the right side of your page. The default alignment spreads the navbar within the container width.


  • Inverse navbar - If you prefer dark skinned navbar, simply modify the look of it by checking the inverse checkbox.
 


  • Navbar elements - In your navbar you can add a header, collapse and nav.
    • Header - Add a header to label your website or app.




    • Collapse - Make your navbar collapsible when the site/app is viewed on mobile devices. 
 


    • Nav - Add menu items withing the navbar.
 


  • Navbar controls - Add forms and buttons within your navbar

    • Form - Add search form with helpful labels for your users.
 


    • Button -Add different buttons, for example sign in, by customizing the button text.

 

Nav

Great and easy accessible navigations are the key to the success of your visitor's experience on your website or app.

  • Nav item properties -Specify the visibility of each nav item, depending on the device that's been viewed on. Decide which items to show and which not to on mobile devices and desktop browsers.


    • Active - Links are customizable for different circumstances. Check active to indicate the current page.
 
    • Disabled - Use it for unclickable links in your nav.


  • Nav items - Easily add nav items before or after an existing item, or delete an item with a single click.


  • Nav dropdown - Add toggleable, contextual menu for displaying lists of links.


  • Nav properties - Customize the look of your nav.
    • Style - Use tabs or pills for your nav items.
 
 
    • Align - Position your nav along the nav container, using the default option, on the left or on the right. 


    • Justified - Easily make tabs or pills equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.
As seen on a screen wider than 768px
Each nav item has equal width


 
As seen on a screen narrower than 768px
All nav links are stacked


    • Stacked - Make the nav links stacked by default, even on screens wider than 768px.

As seen on a screen wider than 768px
All nav links are stacked

As seen on a screen narrower than 768px
All nav links are stacked


    • Delete nav - If you wish to start from scratch the whole nav can be deleted in a single click.

Nav Dropdowns

Add active or disabled nav dropdowns with headers and dividers to save space on your nav or to separate your website or app sections.

  • Add dropdown menu - Add standalone dropdown menu without having a nav or navbar to use it as contextual menu for displaying lists or links.




  • Add button dropdown - Use a button to trigger a dropdown menu, which can be easily customized through the CSS or DMXzone Bootstrap 3 Elements. 




  • Add split button dropdown - Similarly, create split button dropdowns with a separate button, which can be also customized through the CSS or DMXzone Bootstrap 3 Elements.




  • Dropdown properties - Make dropdown links active, add headers, dividers, disable links and choose the visibility of the dropdowns on different devices. 


    • Active - Similar to nav items, dropdown links can also be made active to indicate the current page.


    • Header - Add a header to label sections of actions in any dropdown menu.



    • Divider - Add a divider to separate sections in the dropdown.


    • Disabled - Check to disable the link in a dropdown.


    • Show on - Specify the devices on which the dropdown will be visible and on which it will not be.


  • Dropdown actions - Open and close the dropdown to customize the headers, links and dividers directly in Dreamweaver.
    • Dreamweaver Design View - Click the eye to open or close the dropdown.


    • Floating panel - Use the open dropdown and close dropdown buttons.

Showcases


  • Yachts Rental Showcase

    For this showcase we used the DMXzone Bootstrap 3 Collection for the page layout and content. also with the help of Advanced CSS Animator we manage to animate the show menu button which opens a ...

  • Extreme Sports Showcase

    For this showcase we used DMXzone Bootstrap 3 for the awesomely responsive layout, DMXzone Bootstrap 3 Elements for the page content and DMXzone Bootstrap 3 Navigation. The great looking theme is one ...

  • Car Configurator Showcase

    For this showcase we designed an awesome car configuration page where we used HTML5 Data Bindings and DMXzone Database Connector to connect to our database where our images are stored. Also we used ...

  • Sandstone Design App Showcase

    For this showcase we used the Extended Bootstrap 3 Collection which features DMXzone Bootstrap 3 for the responsive layout, Elements for the content, Navigation for the menu and also the sandstone ...

  • Horse Farm Showcase

    For this showcase we used Advanced Tooltips to enhance the description which appears on hover. Also we added sound that you can play on mouse click, and DMXzone Bootstrap 3, Navigation, Elements and ...

  • Web MP3 Player Showcase

    For this showcase we used DMXzone Bootstrap 3 for the responsive layout, DMXzone Bootstrap 3 Elements for the page content, DMXzone bootstrap 3 Navigation for the page menu and also DMXzone Font ...

  • Recipes Showcase

    For this showcase we used the Extended Bootstrap 3 Collection which features DMXzone Bootstrap 3 for the fully responsive layout, DMXzone Bootstrap 3 Navigation for the menu and DMXzone Bootstrap 3 ...

  • Luxury Yachts Showcase

    For this showcase we used DMXzone Bootstrap 3 to create the responsive page layout and DMXzone Bootstrap 3 Elements for the page content. For the HTML elements of the content we also used HTML5 ...

  • Animated Restaurant Showcase

    For this showcase we designed an amazing page which triggers onload animations with the help of HTML5 Animate CSS. The layout is created with DMXzone bootstrap 3, DMXzone Bootstrap 3 Navigation and ...

  • Animated Icons Showcase

    For this showcase we used DMXzone Bootstrap 3 and Navigation for the responsive layout. The page content features all 71 new shiny icons included in the latest version of DMXzone Font Awesome. ...

  • Web Development Company Showcase

    For this showcase we used the Extended Bootstrap 3 Collection in order to design an awesome Development Company website. The page features fully responsive layout with animated content, great ...

  • Extended Bootstrap 3 Store Showcase

    For this showcase we used the entire Extended Bootstrap 3 Collection, which includes various DMXzone extensions. The responsive layout, content, navigation and the design theme are created with all ...

  • Interactive CV Showcase

    For this showcase we designed animated timeline with HTML5 Animate CSS and branded navbar, using DMXzone Bootstrap 3, Elements and Navigation.

  • Responsive Animated Portfolio Showcase

    For this showcase we used DMXzone Bootswatch flatly theme, DMXzone Bootstrap, Elements and Navigation for the page layout and content. Also the images are stored in a local JS file, using HTML5 Data ...

  • Mauritius Guide Showcase

    For this showcase we used the Yeti themed which is included in the DMXzone Bootswatch. We also used DMXzone Bootstrap 3, Elements and Navigation to create a responsive page and animated its elements ...

  • DMXzone Bootswatch Showcase

    For this showcase we used one of the 15 amazing designs supplied in the DMXzone Bootswatch extension. We first built the design and the content using DMXzone Bootstrap 3 and Elements, then used ...

  • Apparel Store Showcase

    For this showcase we build an apparel store with out DMXzone Bootstrap 3 Collection. In order to create the layout and the page content we used DMXzone Bootstrap 3 and Elements. The page features a ...

  • Travel Agency Showcase

    For this showcase we used the full DMXzone Bootstrap 3 Collection, which features DMXzone Bootstrap 3 for the responsive page layout, DMXzone Bootstrap 3 Elements for the page content and DMXzone ...

  • Luxury Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap 3 Navigation in order to create a fully responsive navbar, which becomes collapsible when viewed on mobile devices. We also added a fully responsive ...

  • Restaurant Onscroll Menu Showcase

    For this showcase we used DMXzone Bootstrap 3 for the page layout and DMXzone Bootstrap 3 Navigation for the top menu and is placed fixed on the top. The menu on the sidebar is stacked, which ...

  • Graphic Designer Portfolio Showcase

    For this one page scrollable showcase we used DMXzone Bootstrap 3 and the Elements for the responsive design and HTML5 Animate CSS for the content elements animations. Using DMXzone Bootstrap 3 ...

  • DMXzone Bootstrap 3 Navigation Preview Showcase

    For this showcase we used DMXzone Bootstrap 3 Navigation in order to create a fully responsive navbar with dropdown menu items, which becomes collapsible when viewed on mobile devices. We also added ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Used Technologies: jQuery, CSS
Screen Shot: External link
Tags: bootstrap 3 navigation Dreamweaver extension menu dropdown navbar


This Extension Requires:


DMXzone Bootstrap 3

Next generation perfect site layout in a few minutes

DMXzone Bootstrap 3 is the next generation Dreamweaver extension based on the newest Twitter Bootstrap. Supplied with four grid systems, it's responsive by default and makes it easy to create great-looking web pages and web apps, which are automatically compatible with various devices.Full support for Bootstrap 3 mobile first design and the dedicated floater gives you a quick access to all the options you need. Additionally, there's an integrated converter that transforms Bootstrap 2 based ...

Read More

History

Version 3.2.0

  • Added support for the new responsive display modes for Bootstrap elements
  • Improved rendering in Dreamweaver Design Mode
  • Allow to add Bootstrap includes for new pages through the Bootstrap 3 Floating inspector
  • Included the latest Bootstrap 3.2.0
  • Improved UI

 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article