diff --git a/addon/components/ui-pager/navbar/component.ts b/addon/components/ui-pager/navbar/component.ts
index fb1b862..cb5bbe5 100644
--- a/addon/components/ui-pager/navbar/component.ts
+++ b/addon/components/ui-pager/navbar/component.ts
@@ -41,6 +41,12 @@ export default class UiPagerNavbar extends Component {
*/
public ariaLabel?: string;
+ /**
+ * When true, the entire navigation bar will be removed when there are zero pages
+ * to navigate.
+ */
+ public hideWhenEmpty = false;
+
protected disabled = false;
protected currentPage = 1;
diff --git a/addon/components/ui-pager/navbar/template.hbs b/addon/components/ui-pager/navbar/template.hbs
index b633466..7f8ece2 100644
--- a/addon/components/ui-pager/navbar/template.hbs
+++ b/addon/components/ui-pager/navbar/template.hbs
@@ -1,80 +1,82 @@
-
+{{/if}}
\ No newline at end of file
diff --git a/tests/integration/components/ui-pager-test.ts b/tests/integration/components/ui-pager-test.ts
index d69c3f1..6842ab2 100644
--- a/tests/integration/components/ui-pager-test.ts
+++ b/tests/integration/components/ui-pager-test.ts
@@ -238,6 +238,28 @@ module('Integration | Component | ui-pager', function (hooks) {
});
});
+ test('the navbar can be hidden when no pages are available', async function (assert) {
+ this.set('records', generateRecordSet());
+ this.set('hideWhenEmpty', true);
+
+ // language=handlebars
+ await render(hbs`
+
+
+
+ `);
+
+ assert.dom('nav').isVisible();
+
+ this.set('records', []);
+
+ assert.dom('nav').doesNotExist();
+
+ this.set('records', generateRecordSet(1));
+
+ assert.dom('nav').isVisible();
+ });
+
test('it generates descriptive text', async function (assert) {
this.set('records', generateRecordSet());