[CLOSED] Collapse NavBar when it does not fit screen

  1. #1

    [CLOSED] Collapse NavBar when it does not fit screen

    Hello again :P

    So using bootstrap, I can have a navbar that when the screen is small enough, will change into a button. How can I do that?

    Example: Name:  Post_Collapse.PNG
Views: 174
Size:  383 Bytes is actually Click image for larger version. 

Name:	Pre_Collapse.PNG 
Views:	58 
Size:	4.4 KB 
ID:	25295
    Last edited by fabricio.murta; Oct 25, 2019 at 8:39 PM.
  2. #2
    Hello @cslocus!

    Although this is still in the "responsive" subject, the problem is relatively different here. So I moved your post to a new thread so it becomes focused on your specific inquire.

    And for the feature you want, the closest I can think of it would be with Tab Panels, like illustrated in this example:

    - Tab Panel > Basic > Advanced Tabs MVC example

    But this is hardly a navigation bar. For this task, we have the Breadcrumb component. While it does not collapse into an icon, when space is not enough, the breadcrumb becomes scrollable. To see this aspect of the breadcrumb, just get the example below, transform the ext:Panel into an ext:Window and then open the example and resize the window to make it too narrow to fit the breadcrumb:

    - Toolbar > Breadcrumb > Overview

    You can see further documentation on the component in Sencha documentation page for Ext.toolbar.Breadcrumb.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Oh well :(

    I'll try and work something out, but thank you anyway! I'll certainly use the breadcrumb elsewhere.

    Please close the thread.
  4. #4
    Okay, closing.

    One idea would be, building a button with menu (7th sample in this example) instead of the breadcrumb when width is too narrow, and using the breadcrumb component when width is enough.

    It would be just a matter of dynamically adding the component on load (given the rendered width of the component containing the nav bar -- be it the viewport, a window, panel or a grid); and also monitor the resize event. It could work pretty well, but you'd have to rely more on client-side events and coding (javascript) for best performance rebuilding or deciding which component to draw.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Example system screen
    By ucaneto in forum 3.x Help
    Replies: 0
    Last Post: Jul 07, 2016, 11:05 PM
  2. [CLOSED] TabPanel or menu with bootstrap navbar functionality
    By HansWapenaar in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 22, 2016, 12:29 PM
  3. Replies: 1
    Last Post: Sep 25, 2013, 11:13 AM
  4. Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  5. Better to use a "page" for each "screen"?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 22, 2009, 11:51 AM

Posting Permissions