Navbar

Twitter bootstrap Documentation

Supported content

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(
        [
            ['label' => 'Home', 'uri' => '#', 'active' => true],
            ['label' => 'Link', 'uri' => '#'],
            [
                'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
                'label' => 'Dropdown',
                'dropdown' => [
                    'items' => [
                        'Action',
                        'Another action',
                        '---',
                        'Something else here',
                    ],
                    'attributes' => ['id' => 'navbarDropdown'],
                ],
            ],
            [
                'label' => 'Disabled',
                'uri' => '#',
                'visible' => false,
            ],
        ],
    ),
    [
        'container' => 'fluid',
        'brand' => 'Navbar',
        'nav' => [
            'ulClass' => 'mb-2 mb-lg-0 me-auto',
        ],
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'type' => 'search',
                        'attributes' => [
                            'placeholder' => 'Search',
                            'aria-label' => 'Search',
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'submit',
                        'options' => [
                            'label' => 'Search',
                            'variant' => 'outline-success',
                        ],
                    ],
                ],
            ],
            'attributes' => ['class' => 'd-flex'],
        ],
        'attributes' => ['id' => 'navbarSupportedContent'],
    ]
);

Brand

Twitter bootstrap Documentation

Text

Twitter bootstrap Documentation

Result

Source

<?php

// As a link
echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => 'Navbar',
        'expand' => false,
        'toggler' => false,
        'container' => 'fluid',
    ]
);

echo PHP_EOL . '<br/>';

// As a heading
echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => [
            'content' => 'Navbar',
            'attributes' => ['class' => 'mb-0 h1'],
            'type' => 'heading',
        ],
        'expand' => false,
        'toggler' => false,
        'container' => 'fluid',
    ]
);

Image

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => [
            'img' => [
                '/twbs-helper-module/img/docs/bootstrap-solid.svg',
                [
                    'width' => 30,
                    'height' => 24,
                    'alt' => '',
                ],
            ],
        ],
        'expand' => false,
        'toggler' => false,
        'container' => true,
    ]
);

Image and text

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => [
            'content' => 'Bootstrap',
            'img' => [
                '/twbs-helper-module/img/docs/bootstrap-solid.svg',
                [
                    'width' => 30,
                    'height' => 24,
                    'alt' => '',
                ],
            ],
        ],
        'expand' => false,
        'toggler' => false,
        'container' => 'fluid',
    ]
);

Nav

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation([
        [
            'label' => 'Home',
            'uri' => '#',
            'active' => true,
        ],
        ['label' => 'Features', 'uri' => '#'],
        ['label' => 'Pricing', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'brand' => 'Navbar',
        'attributes' => ['id' => 'navbarNav'],
        'container' => 'fluid',
    ]
);

echo PHP_EOL . '<br/>';

// Avoid the list-based approach
echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation([
        [
            'label' => 'Home',
            'uri' => '#',
            'active' => true,
        ],
        ['label' => 'Features', 'uri' => '#'],
        ['label' => 'Pricing', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'brand' => 'Navbar',
        'attributes' => ['id' => 'navbarNavAltMarkup'],
        'nav' => ['list' => false],
        'container' => 'fluid',
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation([
        [
            'label' => 'Home',
            'uri' => '#',
            'active' => true,
        ],
        ['label' => 'Features', 'uri' => '#'],
        ['label' => 'Pricing', 'uri' => '#'],
        [
            'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
            'label' => 'Dropdown link',
            'dropdown' => [
                'items' => [
                    'Action',
                    'Another action',
                    'Something else here',
                ],
                'attributes' => ['id' => 'navbarDropdownMenuLink'],
            ],
        ],
    ]),
    [
        'brand' => 'Navbar',
        'attributes' => ['id' => 'navbarNavDropdown'],
        'container' => 'fluid',
    ]
);

Forms

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'container' => 'fluid',
        'expand' => false,
        'toggler' => false,
        'collapse' => false,
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'name' => 'search',
                        'attributes' => [
                            'type' => 'search',
                            'placeholder' => 'Search',
                            'aria-label' => 'Search',
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'submit',
                        'options' => [
                            'label' => 'Search',
                            'variant' => 'outline-success',
                        ],
                    ],
                ],
            ],
            'attributes' => [
                'class' => 'd-flex',
            ],
        ],
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'container' => 'fluid',
        'expand' => false,
        'toggler' => false,
        'collapse' => false,
        'brand' => 'Navbar',
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'attributes' => [
                            'type' => 'search',
                            'placeholder' => 'Search',
                            'aria-label' => 'Search',
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'submit',
                        'options' => [
                            'label' => 'Search',
                            'variant' => 'outline-success',
                        ],
                    ],
                ],
            ],
            'attributes' => [
                'class' => 'd-flex',
            ],
        ],
    ]
);

echo PHP_EOL . '<br/>';

// Input groups work, too:
echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'expand' => false,
        'toggler' => false,
        'collapse' => false,
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'options' => [
                            'add_on_prepend' => '@',
                        ],
                        'attributes' => [
                            'type' => 'text',
                            'placeholder' => 'Username',
                            'aria-label' => 'Username',
                            'aria-describedby' => 'basic-addon1',
                        ],
                    ],
                ],
            ],
            'attributes' => [
                'class' => 'container-fluid',
            ],
        ],
    ]
);

// Various buttons are supported as part of these navbar forms, too.
echo PHP_EOL . '<br/>';

// Input groups work, too:
echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'expand' => false,
        'toggler' => false,
        'collapse' => false,
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'type' => 'button',
                        'name' => 'main_button',
                        'options' => [
                            'label' => 'Main button',
                            'variant' => 'outline-success',
                        ],
                        'attributes' => [
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'button',
                        'name' => 'smaller_button',
                        'options' => [
                            'label' => 'Smaller button',
                            'variant' => 'outline-secondary',
                            'size' => 'sm',
                        ],
                    ],
                ],
            ],
            'attributes' => [
                'class' => 'container-fluid justify-content-start',
            ],
        ],
    ]
);

Text

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'container' => 'fluid',
        'text' => 'Navbar text with an inline element',
        'expand' => false,
        'toggler' => false,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation([
        [
            'label' => 'Home',
            'uri' => '#',
            'active' => true,
        ],
        ['label' => 'Features', 'uri' => '#'],
        ['label' => 'Pricing', 'uri' => '#'],
    ]),
    [
        'container' => 'fluid',
        'brand' => 'Navbar w/ text',
        'text' => 'Navbar text with an inline element',
        'attributes' => ['id' => 'navbarText'],
        'nav' => [
            'ulClass' => 'mb-2 mb-lg-0 me-auto',
        ],
    ]
);

Color schemes

Twitter bootstrap Documentation

Result

Source

<?php


$navigationContainer = new \Laminas\Navigation\Navigation([
    ['label' => 'Home', 'uri' => '#', 'active' => true],
    ['label' => 'Features', 'uri' => '#'],
    ['label' => 'Pricing', 'uri' => '#'],
    ['label' => 'About', 'uri' => '#'],
]);

$options = [
    'container' => 'fluid',
    'brand' => 'Navbar',
    'form' => [
        'elements' => [
            [
                'spec' => [
                    'name' => 'search',
                    'attributes' => [
                        'type' => 'search',
                        'placeholder' => 'Search',
                        'aria-label' => 'Search',
                        'class' => 'me-2',
                    ],
                ],
            ],
            [
                'spec' => [
                    'type' => 'submit',
                    'options' => [
                        'label' => 'Search',
                        'variant' => 'outline-light',
                    ],
                ],
            ],
        ],
        'attributes' => [
            'class' => 'd-flex',
        ],
    ],
    'nav' => [
        'ulClass' => 'mb-2 mb-lg-0 me-auto',
    ],
];

// Navbar dark, background dark
$options['variant'] = 'dark';
$options['background'] = 'dark';
$options['attributes'] = ['id' => 'navbarColor01'];

echo $this->navigation()->navbar()->render($navigationContainer, $options);
echo PHP_EOL . '<br/>';

// Navbar dark, background primary
$options['variant'] = 'dark';
$options['background'] = 'primary';
$options['attributes'] = ['id' => 'navbarColor02'];

echo $this->navigation()->navbar()->render($navigationContainer, $options);
echo PHP_EOL . '<br/>';

// Navbar light, custom background-color
$options['variant'] = 'light';
$options['background'] = false;
$options['form']['elements'][1]['spec']['options']['variant'] = 'outline-primary';
$options['attributes'] = ['id' => 'navbarColor03', 'style' => 'background-color: #e3f2fd;'];

echo $this->navigation()->navbar()->render($navigationContainer, $options);

Containers

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => 'Navbar',
        'wrapping_container' => true,
        'container' => 'fluid',
        'toggler' => false,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'brand' => 'Navbar',
        'container' => 'md',
        'toggler' => false,
    ]
);

Placement

Twitter bootstrap Documentation

Result

Source

<?php


foreach (
    [
        false => 'Default',
        'fixed-top' => 'Fixed top',
        'fixed-bottom' => 'Fixed bottom',
        'sticky-top' => 'Sticky top',
    ] as $placement => $brand
) {
    echo $this->navigation()->navbar()->render(
        new \Laminas\Navigation\Navigation(),
        [
            'brand' => $brand,
            'placement' => $placement,
            'toggler' => false,
            'expand' => false,
            'container' => 'fluid',
        ]
    );
    echo PHP_EOL . '<br/>';
}

Scrolling

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(
        [
            ['label' => 'Home', 'uri' => '#', 'active' => true],
            ['label' => 'Link', 'uri' => '#'],
            [
                'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
                'label' => 'Link',
                'dropdown' => [
                    'items' => [
                        'Action',
                        'Another action',
                        '---',
                        'Something else here',
                    ],
                    'attributes' => ['id' => 'navbarScrollingDropdown'],
                ],
            ],
            [
                'label' => 'Link',
                'uri' => '#',
                'visible' => false,
            ],
        ],
    ),
    [
        'container' => 'fluid',
        'brand' => 'Navbar scroll',
        'nav' => [
            'scroll' => true,
            'ulClass' => 'me-auto my-2 my-lg-0',
        ],
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'type' => 'search',
                        'attributes' => [
                            'placeholder' => 'Search',
                            'aria-label' => 'Search',
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'submit',
                        'options' => [
                            'label' => 'Search',
                            'variant' => 'outline-success',
                        ],
                    ],
                ],
            ],
            'attributes' => ['class' => 'd-flex'],
        ],
        'attributes' => ['id' => 'navbarScroll'],
    ]
);

Responsive behaviors

Twitter bootstrap Documentation

Toggler

Twitter bootstrap Documentation

Result

Source

<?php

$navigation = new \Laminas\Navigation\Navigation(
    [
        ['label' => 'Home', 'uri' => '#', 'active' => true],
        ['label' => 'Link', 'uri' => '#'],
        [
            'label' => 'Disabled',
            'uri' => '#',
            'visible' => false,
        ],
    ],
);

$options = [
    'container' => 'fluid',
    'nav' => [
        'ulClass' => 'mb-2 mb-lg-0 me-auto',
    ],
    'form' => [
        'elements' => [
            [
                'spec' => [
                    'type' => 'search',
                    'attributes' => [
                        'placeholder' => 'Search',
                        'aria-label' => 'Search',
                        'class' => 'me-2',
                    ],
                ],
            ],
            [
                'spec' => [
                    'type' => 'submit',
                    'options' => [
                        'label' => 'Search',
                        'variant' => 'outline-success',
                    ],
                ],
            ],
        ],
        'attributes' => ['class' => 'd-flex'],
    ],
];


$options['brand'] = [
    'content' => 'Hidden brand',
    'position' => 'hidden',
];
$options['attributes'] = ['id' => 'navbarTogglerDemo01'];
echo $this->navigation()->navbar()->render(
    $navigation,
    $options
);

echo PHP_EOL . '<br>';

$options['brand'] = [
    'content' => 'Navbar',
    'position' => 'left',
];
$options['attributes'] = ['id' => 'navbarTogglerDemo02'];
echo $this->navigation()->navbar()->render(
    $navigation,
    $options
);

echo PHP_EOL . '<br>';

$options['brand'] = [
    'content' => 'Navbar',
    'position' => 'right',
];
$options['attributes'] = ['id' => 'navbarTogglerDemo03'];
echo $this->navigation()->navbar()->render(
    $navigation,
    $options
);

External content

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->collapse([
    'targets' => [
        [
            'content' => '<div class="bg-dark p-4">' .
            '    <h5 class="text-white h4">Collapsed content</h5>' .
            '    <span class="text-muted">Toggleable via the navbar brand.</span>' .
            '</div>',
            'attributes' => [
                'id' => 'navbarToggleExternalContent',
            ],
        ],
    ],
]);

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(),
    [
        'expand' => false,
        'toggler' => [
            'attributes' => [
                'data-bs-target' => '#navbarToggleExternalContent',
            ],
        ],
        'container' => 'fluid',
        'background' => 'dark',
        'variant' => 'dark',
    ]
);

Offcanvas

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(
        [
            ['label' => 'Home', 'uri' => '#', 'active' => true],
            ['label' => 'Link', 'uri' => '#'],
            [
                'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
                'label' => 'Dropdown',
                'dropdown' => [
                    'items' => [
                        'Action',
                        'Another action',
                        '---',
                        'Something else here',
                    ],
                    'attributes' => ['id' => 'offcanvasNavbarDropdown'],
                ],
            ],
        ],
    ),
    [
        'container' => 'fluid',
        'expand' => false,
        'offcanvas' => [
            'placement' => 'end',
            'header' => [
                'title' => [
                    'content' => 'Offcanvas',
                    'attributes' => [
                        'id' => 'offcanvasNavbarLabel',
                    ],
                ],
            ],
        ],
        'placement' => 'fixed-top',
        'brand' => 'Offcanvas navbar',
        'nav' => [
            'ulClass' => 'flex-grow-1 pe-3',
            'right_aligned' => true,
        ],
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'type' => 'search',
                        'attributes' => [
                            'placeholder' => 'Search',
                            'aria-label' => 'Search',
                            'class' => 'me-2',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'type' => 'submit',
                        'options' => [
                            'label' => 'Search',
                            'variant' => 'outline-success',
                        ],
                    ],
                ],
            ],
            'attributes' => ['class' => 'd-flex'],
        ],
        'attributes' => ['id' => 'offcanvasNavbar'],
    ]
);